/* ============================================================ SKIN — CLASSIC 2010-era enterprise admin look: gradient buttons, navy chrome, zebra tables, sharp corners, dense spacing, small system fonts. Activates when . Overrides everything needed to make the UI look like phpBB 3 / vBulletin / BootStrap 2. ============================================================ */ html[data-skin="classic"] { /* === Light variant === */ --color-bg: #e9ecef; --color-surface: #ffffff; --color-surface-2: #f4f6f8; --color-surface-inverse: #2c3e50; --color-text: #333333; --color-text-muted: #555555; --color-text-subtle: #777777; --color-text-inverse: #ffffff; --color-border: #c8ced3; --color-border-strong: #a0aab2; --color-accent: #3498db; --color-accent-hover: #2980b9; --color-accent-soft: #e8f3fb; --color-accent-glow: rgba(52, 152, 219, 0.25); --color-accent-ink: #ffffff; --color-chrome-top: #34495e; --color-chrome-bottom: #2c3e50; --color-chrome-text: #ffffff; --color-orange: #e67e22; --color-orange-soft: #fdf2e8; --color-orange-glow: rgba(230, 126, 34, 0.25); --color-success: #27ae60; --color-danger: #c0392b; --color-warning: #f39c12; --color-info: #3498db; --color-zebra: #f6f7f8; --color-hover: #ecf5fc; --btn-grad-top: #fefefe; --btn-grad-bottom: #d9dde1; --btn-grad-hover-top: #ffffff; --btn-grad-hover-bottom: #e8ebee; --btn-border: #a4abb1; --btn-text: #2c3e50; --btn-primary-top: #5dade2; --btn-primary-bottom: #2874a6; --btn-primary-hover-top: #85c1e9; --btn-primary-hover-bottom: #21618c; --btn-primary-border: #1f618d; --shadow-card: 0 1px 2px rgba(0,0,0,0.10); --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.15); --shadow-ring: 0 0 0 2px rgba(52, 152, 219, 0.30); --shadow-inset-light: inset 0 1px 0 rgba(255,255,255,0.55); --radius-xs: 0; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 4px; --radius-full: 9999px; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-8: 16px; --space-10: 20px; --space-12: 24px; --space-16: 32px; --font-sans: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif; --font-mono: Consolas, "Courier New", monospace; --rail-width: 200px; --topbar-height: 36px; --content-max: 1280px; --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } html[data-skin="classic"][data-theme="dark"] { /* === Dark variant === */ --color-bg: #2b2b2b; --color-surface: #3a3a3a; --color-surface-2: #303030; --color-surface-inverse: #1a1a1a; --color-text: #e6e6e6; --color-text-muted: #bcbcbc; --color-text-subtle: #909090; --color-text-inverse: #1a1a1a; --color-border: #555555; --color-border-strong: #707070; --color-accent: #6ab0de; --color-accent-hover: #8ec5e8; --color-accent-soft: rgba(106, 176, 222, 0.18); --color-accent-glow: rgba(106, 176, 222, 0.30); --color-accent-ink: #1a1a1a; --color-chrome-top: #1f2937; --color-chrome-bottom: #111827; --color-chrome-text: #e6e6e6; --color-zebra: #333333; --color-hover: #404040; --btn-grad-top: #4a4a4a; --btn-grad-bottom: #353535; --btn-grad-hover-top: #565656; --btn-grad-hover-bottom: #404040; --btn-border: #6a6a6a; --btn-text: #e6e6e6; --btn-primary-top: #5dade2; --btn-primary-bottom: #1f618d; --btn-primary-hover-top: #6fb7e8; --btn-primary-hover-bottom: #154360; --btn-primary-border: #1a5276; --shadow-card: 0 1px 2px rgba(0,0,0,0.40); --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.55); } /* ============================================================ TYPOGRAPHY ============================================================ */ html[data-skin="classic"] body { font-family: var(--font-sans); font-size: 12px; line-height: 1.4; } html[data-skin="classic"] h1 { font-size: 18px; font-weight: 700; letter-spacing: 0; color: var(--color-text); margin: 0; } html[data-skin="classic"] h2 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text); } html[data-skin="classic"] h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text-muted); } html[data-skin="classic"] h4 { font-size: 12px; font-weight: 700; color: var(--color-text); } html[data-skin="classic"] a { color: var(--color-accent); text-decoration: none; } html[data-skin="classic"] a:hover { color: var(--color-accent-hover); text-decoration: underline; } /* ============================================================ LAYOUT / APP SHELL ============================================================ */ html[data-skin="classic"] body { background: var(--color-bg); color: var(--color-text); } html[data-skin="classic"] .app-content__inner { max-width: var(--content-max); } html[data-skin="classic"] .app-content { padding: 20px 24px; } /* Generic content spacing inside cards/sections */ html[data-skin="classic"] .card__body p, html[data-skin="classic"] .card__body > p, html[data-skin="classic"] .ep-card > p { margin: 0 0 12px; line-height: 1.6; } html[data-skin="classic"] .card__body p:last-child, html[data-skin="classic"] .ep-card > p:last-child { margin-bottom: 0; } html[data-skin="classic"] .card__body ul:not(.data-list), html[data-skin="classic"] .card__body ol { margin: 8px 0 16px; padding-left: 24px; } html[data-skin="classic"] .card__body li { margin-bottom: 6px; line-height: 1.6; } /* ============================================================ SIDEBAR (rail) — Large items with title + description. User-friendly: white background, big icons, readable labels. Always expanded; collapse toggle hidden. ============================================================ */ html[data-skin="classic"] { --rail-width: 280px; } html[data-skin="classic"] .rail, html[data-skin="classic"][data-sidebar="collapsed"] .rail, html[data-skin="classic"][data-sidebar="expanded"] .rail { background: var(--color-surface); border-right: 1px solid var(--color-border-strong); padding: 0; gap: 0; box-shadow: 2px 0 4px rgba(0,0,0,0.05); align-items: stretch; } html[data-skin="classic"] .rail__brand { background: linear-gradient(180deg, var(--color-chrome-top) 0%, var(--color-chrome-bottom) 100%); color: #ffffff; border-radius: 0; width: 100%; height: 56px; font-weight: 700; font-size: 22px; border-bottom: 2px solid var(--color-accent); text-decoration: none; display: flex; align-items: center; justify-content: center; } html[data-skin="classic"] .rail__group { padding: 0; gap: 0; flex-direction: column; align-items: stretch; width: 100%; flex: 1 1 auto; } html[data-skin="classic"] .rail__category { width: 100%; margin-top: 0; padding: 0; align-items: stretch; gap: 0; } html[data-skin="classic"] .rail__category + .rail__category { border-top: 1px solid var(--color-border); margin-top: 0; padding-top: 0; } html[data-skin="classic"] .rail__category-label { display: block; color: var(--color-text-subtle); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 16px 6px; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border); } html[data-skin="classic"][data-sidebar="collapsed"] .rail__category-label { display: block; } /* The signature large item: icon + (title + description). !important is used here to defeat the higher-specificity [data-sidebar="expanded/collapsed"] rules in layout.css. */ html[data-skin="classic"] .rail__item { width: 100% !important; height: auto !important; min-height: 40px !important; border-radius: 0 !important; color: var(--color-text); font-size: 12px; border-left: 4px solid transparent !important; border-bottom: 1px solid var(--color-border) !important; position: relative; display: grid !important; grid-template-columns: 24px minmax(0, 1fr) auto auto !important; grid-template-rows: auto !important; column-gap: 10px !important; padding: 8px 12px 8px 16px !important; justify-content: flex-start !important; align-items: center !important; gap: 0 10px !important; background: transparent; flex-shrink: 0; transition: background 0.12s ease, border-left-color 0.12s ease, color 0.12s ease; } html[data-skin="classic"] .rail__item-label { display: block !important; grid-row: 1 !important; grid-column: 2 !important; } html[data-skin="classic"] .rail__item-icon { grid-row: 1 !important; grid-column: 1 !important; } html[data-skin="classic"] .rail__item-hint { display: inline-flex !important; align-items: center; justify-content: center; grid-row: 1 !important; grid-column: 3 !important; align-self: center !important; width: 16px !important; height: 16px !important; min-width: 16px; border-radius: 50% !important; background: var(--color-surface-2) !important; border: 1px solid var(--color-border) !important; color: var(--color-text-subtle) !important; padding: 0 !important; margin: 0 !important; font-size: 0 !important; line-height: 1 !important; cursor: help; pointer-events: auto !important; flex: 0 0 auto; opacity: 0.55; transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } html[data-skin="classic"] .rail__item:hover .rail__item-hint, html[data-skin="classic"] .rail__item-hint:focus-visible { opacity: 1; } html[data-skin="classic"] .rail__item-hint:hover { background: var(--color-accent) !important; color: #ffffff !important; border-color: var(--color-accent) !important; opacity: 1; } html[data-skin="classic"] .rail__item-badge { grid-row: 1 !important; grid-column: 4 !important; margin: 0 !important; } html[data-skin="classic"] .rail__category-label { display: block !important; } html[data-skin="classic"] .rail__group { flex-direction: column !important; align-items: stretch !important; width: 100% !important; padding: 0 !important; gap: 0 !important; } html[data-skin="classic"] { --rail-width: 280px !important; } html[data-skin="classic"] .rail__item-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-text-muted); grid-row: 1; grid-column: 1; } html[data-skin="classic"] .rail__item-label { display: block; font-weight: 700; font-size: 12px; color: var(--color-text); line-height: 1.25; grid-row: 1; grid-column: 2; overflow-wrap: break-word; min-width: 0; } html[data-skin="classic"][data-sidebar="collapsed"] .rail__item-label { display: block; } /* the hint is a small "i" info badge; the full description shows on hover via the shared tooltip (see sidebar.js bindHintTooltips). */ html[data-skin="classic"] .rail__item-hint::before { content: "i"; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 11px; line-height: 1; color: inherit; display: block; } html[data-skin="classic"] .rail__item:hover { background: var(--color-accent-soft); color: var(--color-text); transform: none; } html[data-skin="classic"] .rail__item:hover .rail__item-icon { color: var(--color-accent); } html[data-skin="classic"] .rail__item.is-active { background: var(--color-accent-soft); color: var(--color-text); border-left-color: var(--color-accent); box-shadow: none; } html[data-skin="classic"] .rail__item.is-active .rail__item-icon, html[data-skin="classic"] .rail__item.is-active .rail__item-label { color: var(--color-accent-hover); } html[data-skin="classic"] .rail__item-badge { background: var(--color-warning); color: #ffffff; border-radius: 2px; padding: 2px 6px; font-size: 9px; text-transform: uppercase; align-self: center; grid-row: 1; grid-column: 4; margin: 0; font-weight: 700; letter-spacing: 0.04em; } html[data-skin="classic"] .rail__item--soon { opacity: 0.60; } html[data-skin="classic"] .rail__item--soon:hover { opacity: 0.85; } /* Hide expand/collapse and quick-add buttons — they confuse users */ html[data-skin="classic"] .rail__toggle, html[data-skin="classic"] .rail__add { display: none; } /* Dark mode adjustments */ html[data-skin="classic"][data-theme="dark"] .rail { background: var(--color-surface); border-right-color: var(--color-border-strong); } html[data-skin="classic"][data-theme="dark"] .rail__category-label { background: var(--color-surface-2); } /* ============================================================ TOPBAR — Roomy, navy chrome with large readable controls ============================================================ */ html[data-skin="classic"] { --topbar-height: 56px; } html[data-skin="classic"] .topnav { background: linear-gradient(180deg, var(--color-chrome-top) 0%, var(--color-chrome-bottom) 100%); height: var(--topbar-height); min-height: var(--topbar-height); padding: 0 16px; box-shadow: 0 1px 0 rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.15); border: none; border-bottom: 2px solid var(--color-accent); color: var(--color-chrome-text); gap: 8px; } /* Hide the pill nav and search — Lohnbuchhaltung focus mode keeps things simple */ html[data-skin="classic"] .topnav__pills, html[data-skin="classic"] .topnav__search-box { display: none; } html[data-skin="classic"] .topnav__spacer { flex: 1; } html[data-skin="classic"] .user-pill { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.95); padding: 4px 12px; height: 38px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.30); font-size: 13px; gap: 8px; box-shadow: var(--shadow-inset-light); } html[data-skin="classic"] .user-pill:hover { background: rgba(255,255,255,0.15); border-color: rgba(0,0,0,0.40); } html[data-skin="classic"] .user-pill__name { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } html[data-skin="classic"] .user-pill__name strong { font-size: 13px; font-weight: 700; color: #ffffff; line-height: 1.1; } html[data-skin="classic"] .user-pill__name span { font-size: 11px; color: rgba(255,255,255,0.70); line-height: 1.1; } html[data-skin="classic"] .user-pill__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent); color: #ffffff; font-size: 12px; font-weight: 700; border: 1px solid rgba(0,0,0,0.30); box-shadow: var(--shadow-inset-light); } html[data-skin="classic"] .topnav__theme { background: rgba(255,255,255,0.08); border: 1px solid rgba(0,0,0,0.30); border-radius: 3px; color: rgba(255,255,255,0.95); width: 38px; height: 38px; box-shadow: var(--shadow-inset-light); } html[data-skin="classic"] .topnav__theme:hover { background: rgba(255,255,255,0.15); } /* Notifications bell — keep readable on the navy bar */ html[data-skin="classic"] .topnav__bell, html[data-skin="classic"] .ep-bell { background: rgba(255,255,255,0.08); border: 1px solid rgba(0,0,0,0.30); border-radius: 3px; color: #ffffff; width: 38px; height: 38px; box-shadow: var(--shadow-inset-light); } html[data-skin="classic"] .topnav__bell:hover, html[data-skin="classic"] .ep-bell:hover { background: rgba(255,255,255,0.15); } html[data-skin="classic"] .topnav__bell svg, html[data-skin="classic"] .ep-bell svg { width: 16px; height: 16px; } /* ============================================================ DROPDOWNS — Classic Windows-style menus ============================================================ */ html[data-skin="classic"] .dropdown__menu { background: #ffffff; border: 1px solid var(--color-border-strong); border-radius: 2px; box-shadow: 2px 2px 4px rgba(0,0,0,0.20); padding: 2px 0; min-width: 180px; } html[data-skin="classic"][data-theme="dark"] .dropdown__menu { background: var(--color-surface); color: var(--color-text); } html[data-skin="classic"] .dropdown__item { padding: 5px 12px; color: var(--color-text); font-size: 12px; border-radius: 0; border-left: 3px solid transparent; } html[data-skin="classic"] .dropdown__item:hover { background: var(--color-accent); color: #ffffff; } html[data-skin="classic"] .dropdown__item.is-active { background: var(--color-accent-soft); border-left-color: var(--color-accent); font-weight: 600; } html[data-skin="classic"] .dropdown__item--danger:hover { background: var(--color-danger); } html[data-skin="classic"] .dropdown__divider { border-color: var(--color-border); margin: 2px 0; } html[data-skin="classic"] .dropdown__icon { width: 14px; height: 14px; margin-right: 6px; } /* ============================================================ PAGE HEAD ============================================================ */ html[data-skin="classic"] .page-head { padding: 16px 20px; margin: 0 0 16px 0; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: 4px; box-shadow: var(--shadow-card); display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; } html[data-skin="classic"] .page-head__title { font-size: 22px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--color-text); margin: 0; line-height: 1.2; } html[data-skin="classic"] .page-head__sub, html[data-skin="classic"] .page-head__subtitle { font-size: 13px; color: var(--color-text-subtle); margin-top: 6px; line-height: 1.5; } html[data-skin="classic"] .page-head__back { font-size: 13px; font-weight: 600; color: var(--color-accent); text-decoration: none; display: inline-block; margin-bottom: 8px; } html[data-skin="classic"] .page-head__back:hover { text-decoration: underline; } html[data-skin="classic"] .page-head__filters { gap: 8px; display: flex; align-items: center; flex-wrap: wrap; } /* ============================================================ CARDS / PANELS ============================================================ */ html[data-skin="classic"] .card, html[data-skin="classic"] .ep-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; box-shadow: var(--shadow-card); margin-bottom: 16px; padding: 0; } html[data-skin="classic"] .card__header, html[data-skin="classic"] .ep-card > .ep-card__title:first-child { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%); border-bottom: 1px solid var(--color-border); padding: 12px 16px; margin: 0; } html[data-skin="classic"] .card__title, html[data-skin="classic"] .ep-card__title { font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--color-text); margin: 0; } html[data-skin="classic"] .card__subtitle, html[data-skin="classic"] .ep-card__subtitle { font-size: 12px; color: var(--color-text-subtle); margin-top: 4px; line-height: 1.5; } html[data-skin="classic"] .card__body { padding: 16px; } html[data-skin="classic"] .ep-card { padding: 16px; } /* ============================================================ BUTTONS — Gradient with inset highlight ============================================================ */ html[data-skin="classic"] .btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(180deg, var(--btn-grad-top) 0%, var(--btn-grad-bottom) 100%); color: var(--btn-text); border: 1px solid var(--btn-border); border-radius: 4px; padding: 8px 18px; height: 38px; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: var(--shadow-inset-light), 0 1px 2px rgba(0,0,0,0.08); cursor: pointer; line-height: 1; } html[data-skin="classic"] .btn:hover { background: linear-gradient(180deg, var(--btn-grad-hover-top) 0%, var(--btn-grad-hover-bottom) 100%); border-color: var(--color-border-strong); } html[data-skin="classic"] .btn:active { background: linear-gradient(0deg, var(--btn-grad-top) 0%, var(--btn-grad-bottom) 100%); box-shadow: inset 0 1px 2px rgba(0,0,0,0.20); } html[data-skin="classic"] .btn--primary { background: linear-gradient(180deg, var(--btn-primary-top) 0%, var(--btn-primary-bottom) 100%); color: #ffffff; border-color: var(--btn-primary-border); text-shadow: 0 -1px 0 rgba(0,0,0,0.20); } html[data-skin="classic"] .btn--primary:hover { background: linear-gradient(180deg, var(--btn-primary-hover-top) 0%, var(--btn-primary-hover-bottom) 100%); } html[data-skin="classic"] .btn--ghost { background: linear-gradient(180deg, var(--btn-grad-top) 0%, var(--btn-grad-bottom) 100%); color: var(--btn-text); border-color: var(--btn-border); text-shadow: none; } html[data-skin="classic"] .btn--danger { background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%); color: #ffffff; border-color: #a93226; text-shadow: 0 -1px 0 rgba(0,0,0,0.20); } html[data-skin="classic"] .btn--sm { height: 30px; padding: 5px 12px; font-size: 12px; } html[data-skin="classic"] .btn--lg { height: 48px; padding: 12px 24px; font-size: 15px; font-weight: 700; } html[data-skin="classic"] .btn__icon { width: 16px; height: 16px; } /* ============================================================ FORMS — Inset border, white background ============================================================ */ html[data-skin="classic"] .input, html[data-skin="classic"] .select, html[data-skin="classic"] .form-input, html[data-skin="classic"] input[type="text"], html[data-skin="classic"] input[type="email"], html[data-skin="classic"] input[type="password"], html[data-skin="classic"] input[type="number"], html[data-skin="classic"] input[type="date"], html[data-skin="classic"] input[type="datetime-local"], html[data-skin="classic"] input[type="month"], html[data-skin="classic"] input[type="tel"], html[data-skin="classic"] input[type="url"], html[data-skin="classic"] input[type="search"], html[data-skin="classic"] select, html[data-skin="classic"] textarea { background: #ffffff; color: #333333; border: 1px solid #b0b6bc; border-top-color: #8e959c; border-radius: 3px; padding: 8px 12px; height: 38px; min-height: 38px; font-size: 13px; font-family: inherit; box-shadow: inset 0 1px 2px rgba(0,0,0,0.10); transition: none; line-height: 1.4; width: 100%; box-sizing: border-box; vertical-align: middle; } html[data-skin="classic"] textarea { height: auto; min-height: 90px; padding: 10px 12px; line-height: 1.5; resize: vertical; } /* Text inputs inside a formwin keep the alpiva gray fill: the classic bare input[type] rule (0,2,2) otherwise repaints them white while needs extra room on the right for the disclosure arrow, and a custom chevron so it lines up with text inputs visually. */ html[data-skin="classic"] select, html[data-skin="classic"] .select { padding-right: 32px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 10px; cursor: pointer; } html[data-skin="classic"][data-theme="dark"] select, html[data-skin="classic"][data-theme="dark"] .select { background-image: url("data:image/svg+xml;utf8,"); } /* Date inputs: ensure the native calendar icon sits comfortably, and the typed value gets the same internal padding. */ html[data-skin="classic"] input[type="date"], html[data-skin="classic"] input[type="datetime-local"], html[data-skin="classic"] input[type="month"] { padding-right: 10px; } html[data-skin="classic"] input[type="date"]::-webkit-calendar-picker-indicator, html[data-skin="classic"] input[type="datetime-local"]::-webkit-calendar-picker-indicator, html[data-skin="classic"] input[type="month"]::-webkit-calendar-picker-indicator { cursor: pointer; padding: 4px; opacity: 0.7; } html[data-skin="classic"] input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* Filter bars / inline form rows — give the row some vertical breathing space */ html[data-skin="classic"] .filter-bar, html[data-skin="classic"] .filter-row, html[data-skin="classic"] form .u-row, html[data-skin="classic"] form > div { align-items: flex-end; } /* Filter bar fields stack their label above the control with a small gap */ html[data-skin="classic"] .filter-bar > *, html[data-skin="classic"] .filter-row > * { display: flex; flex-direction: column; gap: 6px; } /* Make placeholder text in inputs a bit softer */ html[data-skin="classic"] input::placeholder, html[data-skin="classic"] textarea::placeholder { color: #8e95a0; opacity: 1; } html[data-skin="classic"][data-theme="dark"] input[type="text"], html[data-skin="classic"][data-theme="dark"] input[type="email"], html[data-skin="classic"][data-theme="dark"] input[type="password"], html[data-skin="classic"][data-theme="dark"] input[type="number"], html[data-skin="classic"][data-theme="dark"] input[type="date"], html[data-skin="classic"][data-theme="dark"] input[type="search"], html[data-skin="classic"][data-theme="dark"] select, html[data-skin="classic"][data-theme="dark"] textarea, html[data-skin="classic"][data-theme="dark"] .input, html[data-skin="classic"][data-theme="dark"] .form-input { background: #2a2a2a; color: #e6e6e6; border-color: #555; border-top-color: #404040; } html[data-skin="classic"] .input:focus, html[data-skin="classic"] .select:focus, html[data-skin="classic"] .form-input:focus, html[data-skin="classic"] input:focus, html[data-skin="classic"] select:focus, html[data-skin="classic"] textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: inset 0 1px 2px rgba(0,0,0,0.10), 0 0 4px rgba(52, 152, 219, 0.40); } html[data-skin="classic"] label, html[data-skin="classic"] .field__label, html[data-skin="classic"] .form-field label, html[data-skin="classic"] .field > label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin: 0 0 6px; display: block; line-height: 1.3; } html[data-skin="classic"] .form-field { margin-bottom: 16px; } html[data-skin="classic"] .field { display: flex; flex-direction: column; gap: 6px; } html[data-skin="classic"] .field > .field__label, html[data-skin="classic"] .field > label { margin-bottom: 0; } html[data-skin="classic"] .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } /* === Setup Hub Cards (classic skin override) === */ html[data-skin="classic"] .setup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } html[data-skin="classic"] .card.setup-card { display: flex; flex-direction: column; gap: 5px; min-height: 0; padding: 13px 16px 12px; margin-bottom: 0; text-decoration: none; color: inherit; cursor: pointer; background: #fff; border: 1px solid #b9c1c8; border-left: 3px solid #1f8ed6; border-radius: 3px; box-shadow: 0 1px 2px rgba(15, 35, 60, 0.08); transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; } html[data-skin="classic"] .card.setup-card .card__title { font-size: 13.5px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #37444f; line-height: 1.3; background: transparent; border: 0; padding: 0; margin: 0; } html[data-skin="classic"] .card.setup-card .card__sub { flex: 1; margin: 0; color: var(--color-text-subtle); font-size: 12px; line-height: 1.45; } html[data-skin="classic"] .card.setup-card .setup-card__cta { margin-top: 8px; color: #1782cd; font-weight: 600; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; transition: gap 120ms ease; } html[data-skin="classic"] .card.setup-card:hover { border-color: #1f8ed6; border-left-color: #1160a0; background: #f5fafd; box-shadow: 0 2px 8px rgba(15, 35, 60, 0.14); } html[data-skin="classic"] .card.setup-card:hover .setup-card__cta { gap: 8px; } html[data-skin="classic"] .card.setup-card--soon { opacity: 0.6; cursor: not-allowed; pointer-events: none; border-left-color: #b9c1c8; box-shadow: none; } html[data-skin="classic"] .card.setup-card--soon .setup-card__cta { color: var(--color-text-muted); } html[data-skin="classic"] .setup-section-head { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.12em; margin: 4px 0 10px 0; } /* === Form Sections (classic skin override) === */ html[data-skin="classic"] .card.form-section { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 20px; margin-bottom: 16px; } html[data-skin="classic"] form > .card.form-section { align-items: stretch; } html[data-skin="classic"] .form-section__title { margin: 0; align-self: stretch; text-align: left; font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.12em; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); } html[data-skin="classic"] .form-section__hint { margin: -8px 0 0 0; color: var(--color-text-subtle); font-size: 12px; line-height: 1.5; } html[data-skin="classic"] .form-section__row { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 16px; } html[data-skin="classic"] .form-section__row > .field { min-width: 0; } /* Card-as-form (e.g. filter bars wrapped in
) needs padding, because doesn't pick up .card__body padding automatically. */ html[data-skin="classic"] form.card { padding: 16px 18px; } html[data-skin="classic"] form.card > .u-row, html[data-skin="classic"] form.card > .filter-row { gap: 16px; row-gap: 12px; } /* ============================================================ TABLES — The signature classic look ============================================================ */ html[data-skin="classic"] .data-table, html[data-skin="classic"] table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: 12px; } html[data-skin="classic"] .data-table thead, html[data-skin="classic"] table thead { background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%); border-bottom: 2px solid var(--color-border-strong); } html[data-skin="classic"] .data-table th, html[data-skin="classic"] table th { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text-muted); padding: 5px 8px; border-right: 1px solid var(--color-border); border-bottom: none; text-align: left; white-space: nowrap; background-clip: padding-box; } html[data-skin="classic"] .data-table th:last-child, html[data-skin="classic"] table th:last-child { border-right: none; } html[data-skin="classic"] .data-table td, html[data-skin="classic"] table td { padding: 4px 8px; border-bottom: 1px solid var(--color-border); color: var(--color-text); background-clip: padding-box; } html[data-skin="classic"] .data-table tbody tr:nth-child(odd), html[data-skin="classic"] table tbody tr:nth-child(odd) { background: var(--color-zebra); } html[data-skin="classic"] .data-table tbody tr:hover, html[data-skin="classic"] table tbody tr:hover { background: var(--color-hover); } html[data-skin="classic"] .data-table tbody tr:last-child td, html[data-skin="classic"] table tbody tr:last-child td { border-bottom: none; } /* ============================================================ BADGES ============================================================ */ html[data-skin="classic"] .badge { display: inline-block; padding: 1px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 2px; border: 1px solid transparent; } html[data-skin="classic"] .badge--success { background: #d4edda; color: #155724; border-color: #c3e6cb; } html[data-skin="classic"] .badge--danger { background: #f8d7da; color: #721c24; border-color: #f5c6cb; } html[data-skin="classic"] .badge--warning { background: #fff3cd; color: #856404; border-color: #ffeeba; } html[data-skin="classic"] .badge--info { background: #d1ecf1; color: #0c5460; border-color: #bee5eb; } html[data-skin="classic"] .badge--muted { background: #e2e3e5; color: #383d41; border-color: #d6d8db; } html[data-skin="classic"][data-theme="dark"] .badge--success { background: #1e3a26; color: #75b798; border-color: #2d5236; } html[data-skin="classic"][data-theme="dark"] .badge--danger { background: #3e1a1c; color: #ea868f; border-color: #5a2429; } html[data-skin="classic"][data-theme="dark"] .badge--warning { background: #3d2f0f; color: #ffd154; border-color: #5b4516; } html[data-skin="classic"][data-theme="dark"] .badge--info { background: #1a3540; color: #6edff6; border-color: #244b5a; } html[data-skin="classic"][data-theme="dark"] .badge--muted { background: #38383b; color: #b0b0b0; border-color: #4d4d50; } /* ============================================================ ALERTS ============================================================ */ html[data-skin="classic"] .alert { border-radius: 4px; padding: 14px 18px; border: 1px solid; border-left-width: 4px; font-size: 13px; background: var(--color-surface); box-shadow: var(--shadow-card); margin-bottom: 16px; line-height: 1.5; } html[data-skin="classic"] .alert strong { font-weight: 700; margin-right: 4px; } /* Sections with inline action buttons — give comfortable breathing room */ html[data-skin="classic"] .u-mb-6 { margin-bottom: 16px; } html[data-skin="classic"] .u-mt-6 { margin-top: 16px; } html[data-skin="classic"] .u-mt-8 { margin-top: 24px; } html[data-skin="classic"] .u-mb-8 { margin-bottom: 24px; } html[data-skin="classic"] .u-mt-4 { margin-top: 12px; } html[data-skin="classic"] .u-mb-4 { margin-bottom: 12px; } /* Empty state ("No entries...") */ html[data-skin="classic"] .empty-state, html[data-skin="classic"] .u-text-subtle { line-height: 1.5; } html[data-skin="classic"] .alert--success { background: #d4edda; color: #155724; border-color: #c3e6cb; border-left-color: var(--color-success); } html[data-skin="classic"] .alert--danger { background: #f8d7da; color: #721c24; border-color: #f5c6cb; border-left-color: var(--color-danger); } html[data-skin="classic"] .alert--info { background: #d1ecf1; color: #0c5460; border-color: #bee5eb; border-left-color: var(--color-info); } html[data-skin="classic"] .alert--warning { background: #fff3cd; color: #856404; border-color: #ffeeba; border-left-color: var(--color-warning); } html[data-skin="classic"] .alert__icon { width: 14px; height: 14px; } /* ============================================================ KPI / Stat cards ============================================================ */ html[data-skin="classic"] .ep-kpi-grid { gap: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 16px; } html[data-skin="classic"] .ep-kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: 16px 18px; box-shadow: var(--shadow-card); } html[data-skin="classic"] .ep-kpi__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); font-weight: 700; margin: 0 0 8px; } html[data-skin="classic"] .ep-kpi__value { font-size: 26px; font-weight: 700; color: var(--color-text); letter-spacing: 0; line-height: 1.1; font-family: var(--font-mono); } html[data-skin="classic"] .ep-kpi__sub { font-size: 11px; color: var(--color-text-subtle); margin-top: 8px; line-height: 1.4; } /* kpi-row (used in Payroll/Period.cshtml and similar) */ html[data-skin="classic"] .kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; } html[data-skin="classic"] .kpi-row > div { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: 16px 18px; box-shadow: var(--shadow-card); } html[data-skin="classic"] .kpi-row__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); font-weight: 700; margin: 0 0 8px; } html[data-skin="classic"] .kpi-row__value { font-size: 26px; font-weight: 700; color: var(--color-text); line-height: 1.1; font-family: var(--font-mono); letter-spacing: 0; } html[data-skin="classic"] .kpi-row__sub { font-size: 11px; color: var(--color-text-subtle); margin-top: 8px; line-height: 1.4; } /* ============================================================ AUTH CARDS ============================================================ */ html[data-skin="classic"] .auth-card { background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); padding: 16px 20px; } html[data-skin="classic"] .auth-card__title { font-size: 16px; font-weight: 700; color: var(--color-text); } html[data-skin="classic"] .auth-card__subtitle { font-size: 12px; color: var(--color-text-subtle); } /* ============================================================ UTILITIES — Disable big animations ============================================================ */ html[data-skin="classic"] * { animation-duration: 0ms !important; animation-delay: 0ms !important; } html[data-skin="classic"] *, html[data-skin="classic"] *::before, html[data-skin="classic"] *::after { transition: none !important; } html[data-skin="classic"] .btn:hover, html[data-skin="classic"] .rail__item:hover, html[data-skin="classic"] .topnav__pill:hover { transform: none !important; } /* Selection */ html[data-skin="classic"] ::selection { background: var(--color-accent); color: #ffffff; } /* ============================================================ DASHBOARD ACTION TILES — Simple, customer-friendly entry ============================================================ */ /* By default the action tiles are hidden; only the classic skin shows them */ .dash-tiles { display: none; } html[data-skin="classic"] .dash-tiles { display: block; } /* In the classic skin, hide the legacy financial dashboard widgets so the customer is not overwhelmed. They keep working under the modern skin. Covers every dash-* section found in Home/Index.cshtml. */ html[data-skin="classic"] .dash-welcome, html[data-skin="classic"] .dash-hero, html[data-skin="classic"] .dash-grid, html[data-skin="classic"] .dash-grid--two, html[data-skin="classic"] .dash-grid--three, html[data-skin="classic"] .dash-original, html[data-skin="classic"] .dash-recent, html[data-skin="classic"] .dash-tasks, html[data-skin="classic"] .dash-chart, html[data-skin="classic"] .dash-stats-grid, html[data-skin="classic"] .dash-onboarding { display: none !important; } html[data-skin="classic"] .dash-tiles { margin: 0; } html[data-skin="classic"] .dash-tiles__head { display: flex; align-items: center; gap: 8px; background: #1f8ed6; color: #ffffff; padding: 7px 12px; border-radius: 3px 3px 0 0; border: 1px solid #1878bd; border-bottom: none; } html[data-skin="classic"] .dash-tiles__head-icon { width: 15px; height: 15px; opacity: 0.95; flex-shrink: 0; } html[data-skin="classic"] .dash-tiles__title { color: #ffffff; font-size: 13px; font-weight: 600; margin: 0; letter-spacing: 0; text-transform: none; } html[data-skin="classic"] .dash-tiles__sub { color: var(--color-text-muted); font-size: 12px; margin: 0; padding: 8px 12px; line-height: 1.4; background: #f4f6f8; border-left: 1px solid #b9c1c8; border-right: 1px solid #b9c1c8; border-bottom: 1px solid #e2e6ea; } html[data-skin="classic"] .dash-tiles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: var(--color-surface); border: 1px solid #b9c1c8; border-top: none; border-radius: 0 0 3px 3px; overflow: hidden; } @media (max-width: 1080px) { html[data-skin="classic"] .dash-tiles__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { html[data-skin="classic"] .dash-tiles__grid { grid-template-columns: 1fr; } } html[data-skin="classic"] .dash-tile { display: flex; align-items: flex-start; gap: 14px; padding: 17px 20px; background: var(--color-surface); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); position: relative; min-height: 150px; } /* Strip the right border on the last column, bottom border on the last row */ html[data-skin="classic"] .dash-tile:nth-child(3n) { border-right: none; } html[data-skin="classic"] .dash-tile:nth-last-child(-n+3):nth-child(3n+1), html[data-skin="classic"] .dash-tile:nth-last-child(-n+3):nth-child(3n+1) ~ .dash-tile { border-bottom: none; } html[data-skin="classic"] .dash-tile:hover { background: var(--color-accent-soft); text-decoration: none; } html[data-skin="classic"] .dash-tile__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; background: var(--color-accent); box-shadow: var(--shadow-inset-light); } html[data-skin="classic"] .dash-tile__icon svg { width: 24px; height: 24px; } html[data-skin="classic"] .dash-tile--employees .dash-tile__icon { background: #3498db; } html[data-skin="classic"] .dash-tile--payroll .dash-tile__icon { background: #27ae60; } html[data-skin="classic"] .dash-tile--lohnbuchhaltung .dash-tile__icon { background: #8e44ad; } html[data-skin="classic"] .dash-tile--yearend .dash-tile__icon { background: #e67e22; } html[data-skin="classic"] .dash-tile--reports .dash-tile__icon { background: #16a085; } html[data-skin="classic"] .dash-tile--help .dash-tile__icon { background: #7f8c8d; } html[data-skin="classic"] .dash-tile__body { flex: 1; min-width: 0; } html[data-skin="classic"] .dash-tile__title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0 0 4px; text-transform: none; letter-spacing: 0; } html[data-skin="classic"] .dash-tile__desc { font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 10px; line-height: 1.45; } html[data-skin="classic"] .dash-tile__cta { font-size: 12px; font-weight: 700; color: var(--color-accent); text-transform: none; letter-spacing: 0; } html[data-skin="classic"] .dash-tile:hover .dash-tile__cta { color: var(--color-accent-hover); text-decoration: underline; } /* ============================================================ CLASSIC DASHBOARD SUMMARY — payroll/admin at-a-glance panels under the launcher tiles (classic skin only). Uses .dashpanel (NOT .formwin) so the shared :has(.formwin) full-width rule is never triggered on the dashboard; the azure header reuses the standalone .formwin__titlebar visual. ============================================================ */ .dash-classic-summary { display: none; } html[data-skin="classic"] .dash-classic-summary { display: block; margin-top: 16px; } html[data-skin="classic"] .dash-classic-summary .kpi-row { margin-bottom: 16px; } /* Classic dashboard goes full-width (like the grid pages) without the skin-agnostic WideLayout flag, so the modern financial dashboard stays capped. Scoped to classic + the summary's presence; :has raises specificity above the classic --content-max cap. */ html[data-skin="classic"] .app-content:has(.dash-classic-summary) { padding: var(--space-4); } html[data-skin="classic"] .app-content__inner:has(.dash-classic-summary) { max-width: none; margin: 0; } html[data-skin="classic"] .dashpanel { background: var(--color-surface); border: 1px solid #b9c1c8; border-radius: 3px; margin-bottom: 16px; overflow: hidden; } html[data-skin="classic"] .dashpanel__body { padding: 8px 14px; } /* dashboard panels are not fixed-height scroll boxes, so keep the reused grid table header inline instead of sticky-floating on page scroll. */ html[data-skin="classic"] .dashpanel .grid__table thead th { position: static; } html[data-skin="classic"] .dash-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } html[data-skin="classic"] .dash-duo .dashpanel { margin-bottom: 0; } @media (max-width: 1100px) { html[data-skin="classic"] .dash-duo { grid-template-columns: 1fr; } } html[data-theme="dark"] .dash-classic-summary .dashpanel { background: #232a33; border-color: #3a4350; }