@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,600&display=swap");

:root {
  --ink: #17231e;
  --muted: #718078;
  --line: #e3e9e5;
  --bg: #f5f7f4;
  --panel: #fff;
  --green: #176b4b;
  --green-dark: #113d2f;
  --mint: #dff1e9;
  --orange: #db7d39;
  --red: #c95050;
  --blue: #4077a8;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 6px; color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.login-page { min-height: 100vh; background: var(--green-dark); color: white; padding: 34px 7vw; position: relative; overflow: hidden; }
.login-page::after { content: ""; position: absolute; width: 620px; height: 620px; border: 1px solid #ffffff1c; border-radius: 50%; left: 22%; bottom: -390px; box-shadow: 0 0 0 90px #ffffff08, 0 0 0 180px #ffffff05; }
.login-brand, .brand { display: flex; align-items: center; gap: 12px; }
.login-brand { font-weight: 700; }
.login-brand .language-select { margin-left: auto; }
.brand-logo { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: white; }
.login-logo { width: 58px; height: 58px; }
.login-layout { position: relative; z-index: 1; max-width: 1120px; margin: 9vh auto 0; display: grid; grid-template-columns: 1.15fr .75fr; gap: 11vw; align-items: center; }
.login-copy h1 { margin: 12px 0 24px; font-size: clamp(42px, 5.5vw, 74px); line-height: 1.04; letter-spacing: -.05em; }
.login-copy h1 em { font-family: "Playfair Display", serif; color: #8ed1b2; font-weight: 600; }
.login-copy > p:not(.eyebrow) { max-width: 560px; color: #c7d9d1; font-size: 17px; line-height: 1.7; }
.feature-row { display: flex; gap: 24px; margin-top: 32px; color: #d8e6e0; font-size: 13px; }
.login-card { background: white; color: var(--ink); padding: 40px; border-radius: 24px; display: grid; gap: 20px; box-shadow: 0 30px 80px #071b1466; }
.login-card h2 { margin: 0; font-size: 25px; }
label { display: grid; gap: 8px; color: #435149; font-size: 13px; font-weight: 600; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; background: #fff; color: var(--ink); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px #176b4b14; }
.primary-button { border: 0; background: var(--green); color: white; padding: 13px 18px; border-radius: 10px; font-weight: 700; display: inline-flex; justify-content: center; align-items: center; gap: 20px; }
.primary-button:hover { background: #11593e; }
.compact { padding: 11px 16px; }
.demo-note, .form-error { min-height: 18px; margin: 0; font-size: 12px; text-align: center; color: var(--muted); }
.form-error { color: var(--red); }
.language-select { width: auto; min-width: 68px; padding: 9px 10px; border-color: #d7e2dc; font-weight: 700; }
.security-check { padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #f7faf8; display: grid; gap: 10px; }
.security-pulse { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.security-pulse i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #c9d7d0; border-top-color: var(--green); animation: security-spin .9s linear infinite; }
.security-pulse.ready { color: var(--green); }
.security-pulse.ready i { border: 0; background: var(--green); animation: none; box-shadow: 0 0 0 5px #176b4b16; }
.security-pulse.ready i::after { content: "✓"; display: block; color: white; font-size: 10px; text-align: center; line-height: 15px; }
.security-check label { grid-template-columns: 1fr auto; align-items: center; }
.security-check label input { grid-column: 1 / -1; }
@keyframes security-spin { to { transform: rotate(360deg); } }
.reset-layout { position: relative; z-index: 1; width: min(460px, 100%); margin: 10vh auto 0; }
.reset-link { display: block; text-align: center; text-decoration: none; }
.app { min-height: 100vh; display: grid; grid-template-columns: 245px 1fr; }
.sidebar { background: #102d24; color: white; padding: 25px 17px 18px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: 20; }
.brand { padding: 0 8px 30px; }
.brand b, .brand small, .profile b, .profile small { display: block; }
.brand small, .profile small { margin-top: 3px; color: #9db6ac; font-size: 10px; }
nav { display: grid; grid-auto-rows: max-content; gap: 5px; overflow-y: auto; min-height: 0; padding-right: 2px; flex: 1; }
nav button, .text-button { border: 0; background: transparent; color: #b9cec5; padding: 12px 13px; border-radius: 9px; text-align: left; }
nav button span { display: inline-block; width: 26px; font-size: 17px; }
nav button.active, nav button:hover { background: #ffffff10; color: white; }
.nav-group-toggle { position: relative; font-weight: 600; }
.nav-group-toggle i { position: absolute; right: 13px; font-style: normal; transition: transform .2s; }
.nav-group-toggle:not(.open) i { transform: rotate(-90deg); }
.nav-submenu { display: grid; grid-auto-rows: max-content; gap: 3px; margin: -2px 0 5px 14px; padding-left: 9px; border-left: 1px solid #ffffff18; }
.nav-submenu.collapsed { display: none; }
.nav-submenu button { padding: 9px 11px; font-size: 12px; }
.nav-submenu button span { width: 23px; font-size: 14px; }
.sidebar-footer { margin-top: auto; }
.creator-credit { padding: 13px 8px 16px; border-bottom: 1px solid #ffffff16; margin-bottom: 4px; }
.creator-credit small, .creator-credit b { display: block; }
.creator-credit small { color: #819f92; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.creator-credit b { margin: 5px 0 3px; font-size: 11px; color: #e6efe9; }
.creator-credit a { color: #a9c4b9; font-size: 9px; text-decoration: none; overflow-wrap: anywhere; }
.creator-credit a:hover { color: white; }
.creator-credit p { margin: 7px 0 0; color: #789489; font-size: 8px; line-height: 1.35; }
.text-button { width: 100%; border-bottom: 1px solid #ffffff16; border-radius: 0; margin-bottom: 15px; }
.profile { display: grid; grid-template-columns: 36px 1fr 28px; align-items: center; gap: 9px; padding: 5px 7px; }
.profile b { font-size: 12px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #d9b777; color: #3b2d15; font-weight: 700; }
.profile button { border: 0; background: none; color: #a6bbb2; font-size: 18px; }
main { min-width: 0; }
.topbar { height: 84px; padding: 0 35px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; }
.topbar h2 { margin: 0; font-size: 18px; }
.topbar-title { margin-right: auto; }
.restaurant-picker { width: 210px; display: flex; align-items: center; gap: 10px; margin-right: 14px; }
.restaurant-picker span { color: var(--muted); font-size: 11px; }
.restaurant-picker select { padding: 10px; }
.notification-button { position: relative; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: white; color: var(--green); font-size: 17px; }
.notification-button b { position: absolute; right: -4px; top: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 12px; display: grid; place-items: center; background: var(--red); color: white; font-size: 10px; }
.menu-button { display: none; border: 0; background: none; font-size: 20px; }
.content { padding: 34px 35px 60px; max-width: 1600px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }
.welcome, .section-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 28px; }
.welcome h1, .section-head h1 { margin: 0 0 8px; font-size: 31px; letter-spacing: -.04em; }
.welcome p:last-child, .section-head p:last-child { margin: 0; color: var(--muted); }
.welcome select { width: 180px; }
.period-controls { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.custom-date-range { display: flex; gap: 8px; }
.custom-date-range label { font-size: 10px; color: var(--muted); }
.custom-date-range input { min-width: 145px; padding: 9px 10px; }
.restaurant-comparison { margin-bottom: 18px; }
.head-actions { display: flex; gap: 9px; }
.filter-summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: -10px 0 15px; padding: 11px 14px; background: #edf4f0; border-radius: 10px; color: #496158; font-size: 12px; }
.volume-toolbar { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(5, minmax(120px, 1fr)); gap: 10px; margin-bottom: 16px; }
.volume-toolbar input, .volume-toolbar select { min-width: 0; width: 100%; }
.list-summary { display: flex; justify-content: space-between; gap: 12px; padding: 0 2px 13px; color: var(--muted); font-size: 11px; }
.list-summary b { color: var(--ink); font-size: 12px; }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-top: 16px; }
.pagination > span { color: var(--muted); font-size: 11px; }
.page-buttons { display: flex; gap: 5px; }
.page-buttons button { min-width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); }
.page-buttons button.active { border-color: var(--green); background: var(--green); color: white; }
.pagination button:disabled { opacity: .45; cursor: default; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.metric-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; position: relative; overflow: hidden; }
.metric-card::after { content: ""; position: absolute; width: 75px; height: 75px; border-radius: 50%; right: -25px; top: -30px; background: var(--tint, var(--mint)); }
.metric-card small { color: var(--muted); font-weight: 600; }
.metric-card strong { display: block; margin: 11px 0 6px; font-size: 25px; letter-spacing: -.04em; }
.metric-card span { color: var(--muted); font-size: 11px; }
.metric-card.positive strong { color: var(--green); }
.metric-card.negative strong { color: var(--red); }
.dashboard-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 22px; min-width: 0; }
.panel.wide { grid-column: 1 / -1; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.panel h3 { margin: 0; font-size: 16px; }
.link-button { border: 0; background: none; color: var(--green); font-size: 12px; font-weight: 700; }
.legend { display: flex; gap: 14px; color: var(--muted); font-size: 11px; }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.income-dot { background: var(--green); }.expense-dot { background: #d9b777; }
.bar-chart { height: 230px; display: flex; align-items: end; gap: 13px; border-bottom: 1px solid var(--line); padding-top: 15px; }
.bar-group { flex: 1; height: 100%; display: flex; align-items: end; justify-content: center; gap: 5px; position: relative; padding-bottom: 26px; }
.bar { width: min(18px, 35%); min-height: 2px; border-radius: 4px 4px 0 0; transition: height .3s; }
.bar.income { background: var(--green); }.bar.expense { background: #d9b777; }
.bar-group label { position: absolute; bottom: 6px; font-size: 10px; color: var(--muted); }
.item-list { display: grid; }
.list-item { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.date-box { border-radius: 9px; background: var(--mint); color: var(--green-dark); text-align: center; padding: 6px; }
.date-box b, .date-box small { display: block; }.date-box b { font-size: 15px; }.date-box small { font-size: 9px; text-transform: uppercase; }
.list-item h4 { margin: 0 0 3px; font-size: 13px; }.list-item p { margin: 0; color: var(--muted); font-size: 10px; }
.list-item strong { font-size: 12px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 11px 10px; color: var(--muted); text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
td { padding: 14px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td b, td small { display: block; } td small { color: var(--muted); margin-top: 3px; }
.money-in { color: var(--green); }.money-out { color: var(--red); }
.badge { display: inline-block; border-radius: 20px; padding: 5px 9px; font-size: 10px; font-weight: 700; background: #eef1ef; }
.badge.paid { background: #e1f2e9; color: #176b4b; }.badge.pending { background: #fff0da; color: #9a5a1f; }.badge.partial { background: #e6eef7; color: #35688e; }.badge.overdue { background: #f9e2e2; color: #a83a3a; }.badge.cancelled { color: #707070; }
.badge.rejected { background: #f9e2e2; color: #a83a3a; }
.row-actions { display: flex; gap: 6px; }
.icon-button { border: 1px solid var(--line); background: white; border-radius: 7px; padding: 6px 8px; color: var(--muted); }
.file-view-button { color: var(--green); border-color: #1f6b5538; font-weight: 700; white-space: nowrap; }
.access-fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 0; }
.access-fieldset legend { padding: 0 7px; font-weight: 700; color: var(--ink); }
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.access-option { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; cursor: pointer; }
.access-option input { width: auto; margin-top: 3px; }
.access-option span { display: grid; gap: 2px; }
.access-option small { color: var(--muted); line-height: 1.35; }
.access-option:has(input:checked) { border-color: #1f6b5570; background: #edf7f2; }
.access-option:has(input:disabled) { opacity: .55; cursor: default; }
.permission-grid { display: grid; gap: 7px; }
.permission-row { display: grid; grid-template-columns: minmax(180px, 1fr) 110px 120px; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; }
.permission-row label { display: flex; align-items: center; gap: 7px; }
.permission-row input { width: auto; }
.accounting-period-bar, .hr-period-filter { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.accounting-period-bar > label, .hr-period-filter > label { min-width: 180px; }
.restaurant-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.restaurant-info-card .panel-head { margin-bottom: 14px; }
.employee-document-toolbar { display: grid; grid-template-columns: repeat(2, minmax(180px, 280px)); gap: 12px; margin-bottom: 18px; }
.banking-guide { margin-bottom: 18px; }
.banking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; }
.banking-transactions-panel { margin-top: 18px; }
.company-document-panel { margin-bottom: 18px; }
.company-document-toolbar { display: grid; grid-template-columns: repeat(2, minmax(180px, 280px)); gap: 10px; margin-bottom: 16px; }
.notification-list { display: grid; gap: 9px; }
.notification-item { display: grid; gap: 4px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink); text-align: left; }
.notification-item span { color: var(--muted); font-size: 12px; }
.notification-item.unread { border-color: #176b4b66; background: #edf7f2; }
.employee-center-toolbar { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(6, minmax(135px, 1fr)) auto; gap: 10px; margin-bottom: 18px; align-items: end; }
.employee-center-toolbar input, .employee-center-toolbar select { min-width: 0; }
.employee-name-button { border: 0; padding: 0; background: none; color: var(--green); text-align: left; font-weight: 800; }
.employee-profile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.employee-profile-grid > div { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; }
.employee-profile-grid small, .employee-profile-grid b { display: block; }
.employee-profile-grid small { color: var(--muted); margin-bottom: 5px; }
.employee-profile-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.employee-profile-sections article { padding: 15px; border: 1px solid var(--line); border-radius: 11px; }
.employee-profile-sections h4 { margin: 0 0 10px; }
.employee-profile-sections p { margin: 5px 0; color: var(--muted); font-size: 12px; }
#hrMetrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.employee-profile-modal { width: min(1000px, calc(100vw - 32px)); }
.employee-letter-panel { margin-top: 18px; }
.letter-print-area { display: none; }
.official-letter { width: 100%; color: #111; font-family: Arial, sans-serif; font-size: 11pt; line-height: 1.55; }
.official-letter .letterhead { padding-bottom: 12mm; border-bottom: 1px solid #aaa; }
.official-letter .sender { font-size: 9pt; }
.official-letter .recipient { margin: 16mm 0 10mm; white-space: pre-line; }
.official-letter h1 { margin: 8mm 0; font-size: 15pt; }
.official-letter .letter-body { white-space: pre-wrap; }
.official-letter .signature { margin-top: 20mm; }
.official-letter .legal-note { margin-top: 16mm; padding-top: 4mm; border-top: 1px solid #ddd; color: #666; font-size: 8pt; }
.accounting-control-panel { margin-bottom: 16px; }
.accounting-alert-list { display: grid; gap: 8px; margin-top: 14px; }
.accounting-alert { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 11px 13px; text-align: left; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--ink); }
.accounting-alert > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #edf3f1; font-weight: 800; }
.accounting-alert > div { display: grid; gap: 2px; }
.accounting-alert small { color: var(--muted); }
.accounting-alert i { color: var(--green); font-size: 12px; font-style: normal; font-weight: 700; }
.accounting-alert.critical { border-color: #b53c3038; background: #fff7f5; }
.accounting-alert.critical > span { background: #f8e2de; color: #9d2d24; }
.accounting-alert.warning { border-color: #c78b283d; background: #fffbf2; }
.accounting-alert.warning > span { background: #fff0cf; color: #8f5b08; }
.tax-fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 15px; margin: 0; }
.tax-fieldset legend { padding: 0 7px; font-weight: 800; }
.tax-fieldset > p { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.tax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tax-line { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfb; }
.tax-line > b { color: var(--green); }
.tax-line label { font-size: 11px; }
.tax-totals { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.report-filter-panel { margin-bottom: 18px; }
.report-filter-grid { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 12px; align-items: end; }
.report-filter-panel .filter-summary { margin: 14px 0 0; }
.report-detail-panel { margin-top: 18px; }
.vat-report-panel { margin-bottom: 18px; }
.document-package-panel { margin-bottom: 18px; }
.document-package-form { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(150px, 1fr)) auto; gap: 12px; align-items: end; margin-bottom: 14px; }
.document-package-form button { min-height: 42px; }
.vat-report-panel .panel-head label { min-width: 130px; }
.vat-result { display: grid; gap: 4px; margin: 0 0 18px; padding: 15px 17px; border-radius: 12px; }
.vat-result.payable { background: #fff0ed; color: #8b2d24; }
.vat-result.receivable { background: #e6f5ed; color: #176247; }
.vat-result b { font-size: 16px; }
.vat-disclaimer { margin: 16px 0 0; padding: 11px 13px; border-radius: 9px; background: #fff8e6; color: #745616; font-size: 12px; }
.ocr-uncertain { border: 2px solid #c8463c !important; border-radius: 10px; background: #fff1ef !important; padding: 8px !important; }
.ocr-uncertain::after { content: "OCR bu alandan emin değil. Kontrol edip düzeltin."; display: block; margin-top: 5px; color: #a32f27; font-size: 11px; font-weight: 700; }
.upload-status.uncertain { color: #a32f27; font-weight: 700; }
.toolbar { display: flex; gap: 12px; margin-bottom: 15px; }
.toolbar input { max-width: 370px; }.toolbar select { width: 190px; }
.table-panel { padding: 8px 18px; }
.mini-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 18px; }
.mini-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 17px; }
.mini-card small { color: var(--muted); }.mini-card b { display: block; margin-top: 8px; font-size: 20px; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.report-mail-panel { margin-bottom: 18px; }
.report-mail-panel p { margin: 5px 0 16px; color: var(--muted); font-size: 12px; }
.mail-form { display: grid; grid-template-columns: 150px 1fr 1fr auto; gap: 10px; align-items: end; }
.mail-form input, .mail-form select { padding: 10px 11px; }
#mailStatus { display: block; margin-top: 10px; color: var(--green); }
.calculation-box { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; background: #edf4f0; border-radius: 10px; }
.calculation-box div { color: var(--muted); font-size: 11px; }
.calculation-box b { display: block; margin-top: 4px; color: var(--ink); font-size: 17px; }
.checkbox-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; }
.checkbox-row input { width: auto; }
.schedule-controls { display: grid; grid-template-columns: minmax(220px, 1.6fr) 120px 130px auto minmax(220px, 1fr); gap: 12px; align-items: end; margin-bottom: 18px; }
.schedule-controls select { padding: 10px 11px; }
.week-navigation { display: flex; gap: 8px; }
.week-navigation .secondary-button { padding: 10px 12px; white-space: nowrap; }
.schedule-period { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 8px 13px; background: #edf4f0; border-radius: 10px; }
.schedule-period small, .schedule-period span { color: var(--muted); font-size: 10px; }
.schedule-period b { margin: 3px 0; font-size: 13px; }
.schedule-panel { padding: 0; overflow: hidden; }
.schedule-table-wrap { overflow-x: auto; }
.schedule-table { min-width: 1280px; table-layout: fixed; }
.schedule-table th:first-child, .schedule-table td:first-child { width: 180px; position: sticky; left: 0; z-index: 2; background: white; }
.schedule-table th:first-child { z-index: 3; background: #f8faf8; }
.schedule-table th { text-align: center; background: #f8faf8; }
.schedule-table th:first-child, .schedule-table td:first-child { text-align: left; }
.schedule-table td { padding: 8px; vertical-align: top; }
.shift-cell { display: grid; gap: 5px; min-width: 130px; }
.shift-cell select, .shift-cell input { border-radius: 7px; padding: 7px; font-size: 10px; }
.shift-times { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.shift-cell[data-status="off"] .shift-times, .shift-cell[data-status="vacation"] .shift-times, .shift-cell[data-status="sick"] .shift-times { opacity: .35; }
.shift-cell[data-status="off"] { background: #f5f6f5; }
.shift-cell[data-status="vacation"] { background: #edf4fb; }
.shift-cell[data-status="sick"] { background: #fff0f0; }
.employee-shift-total { margin-top: 6px; color: var(--green); font-size: 11px; font-weight: 700; }
.schedule-notes { padding: 16px 18px 19px; border-top: 1px solid var(--line); }
.schedule-history-panel { margin-top: 18px; }
.schedule-history { display: flex; flex-wrap: wrap; gap: 8px; }
.schedule-history button { border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 9px 11px; color: var(--ink); font-size: 11px; }
.schedule-history button:hover, .schedule-history button.active { border-color: var(--green); background: #edf4f0; color: var(--green-dark); }
.schedule-print-area { display: none; }
.schedule-print-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 6mm; }
.schedule-print-header h1 { margin: 0 0 2mm; font-size: 18pt; }
.schedule-print-header p { margin: 0; color: #555; font-size: 9pt; }
.schedule-print-logo { width: 22mm; height: 22mm; object-fit: contain; }
.schedule-print-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 7.5pt; }
.schedule-print-table th, .schedule-print-table td { border: .3mm solid #9aa39e; padding: 2mm 1.5mm; vertical-align: top; }
.schedule-print-table th { background: #e8efeb; color: #17231e; text-align: center; font-size: 7pt; }
.schedule-print-table th:first-child { width: 34mm; text-align: left; }
.schedule-print-table td { height: 14mm; }
.schedule-print-table b, .schedule-print-table small { display: block; }
.schedule-print-table small { margin-top: 1mm; color: #555; font-size: 6.5pt; }
.schedule-print-footer { display: flex; justify-content: space-between; margin-top: 4mm; color: #555; font-size: 7pt; }
.employee-portal { min-height: 100vh; background: #f3f6f3; }
.portal-topbar { min-height: 76px; padding: 12px max(22px, calc((100vw - 1240px) / 2)); background: #102d24; color: white; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.portal-brand, .portal-user { display: flex; align-items: center; gap: 12px; }
.portal-brand img { width: 48px; height: 48px; border-radius: 10px; background: white; }
.portal-brand b, .portal-brand small, .portal-user b, .portal-user small { display: block; }
.portal-brand small, .portal-user small { color: #a9c1b7; font-size: 10px; margin-top: 3px; }
.portal-user { text-align: right; }
.portal-user .secondary-button { color: white; border-color: #ffffff32; background: #ffffff0d; padding: 9px 14px; }
.portal-content { width: min(1240px, calc(100% - 36px)); margin: 0 auto; padding: 34px 0 60px; }
.portal-hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }
.portal-hero h1 { margin: 0 0 8px; font-size: 34px; letter-spacing: -.04em; }
.portal-hero p:last-child { margin: 0; color: var(--muted); }
.portal-position { min-width: 220px; padding: 16px 19px; border-radius: 13px; background: #e3efe9; }
.portal-position small, .portal-position span { display: block; color: var(--muted); font-size: 10px; }
.portal-position b { display: block; margin: 5px 0; font-size: 17px; }
.portal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.portal-wide { grid-column: 1 / -1; }
.portal-wide .panel-head select { width: 230px; padding: 9px 11px; }
.portal-schedule { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.portal-day { min-height: 130px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #f9fbf9; }
.portal-day.today { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.portal-day > small { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.portal-day > b { display: block; margin: 4px 0 14px; font-size: 13px; }
.portal-day strong { display: block; color: var(--green-dark); font-size: 14px; }
.portal-day span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.portal-form { display: grid; gap: 14px; }
.portal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.portal-form .form-error { text-align: left; }
.portal-calculation { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.portal-calculation div { padding: 10px; border-radius: 9px; background: #edf4f0; color: var(--muted); font-size: 9px; }
.portal-calculation b { display: block; margin-top: 4px; color: var(--ink); font-size: 15px; }
.portal-confirm { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border-radius: 9px; background: #fff8e9; font-size: 11px; line-height: 1.5; }
.portal-confirm input { width: auto; margin-top: 2px; }
.portal-leave-history { display: grid; gap: 10px; max-height: 490px; overflow: auto; }
.portal-leave-item { padding: 14px; border: 1px solid var(--line); border-radius: 10px; }
.portal-leave-item-head { display: flex; justify-content: space-between; gap: 10px; }
.portal-leave-item h4 { margin: 0 0 5px; font-size: 13px; }
.portal-leave-item p { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.portal-leave-item small { color: var(--muted); }
.leave-decision-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.leave-decision-actions button { padding: 6px 9px; }
.reservation-controls { display: grid; grid-template-columns: minmax(210px, 1.4fr) repeat(4, minmax(125px, .8fr)) auto; gap: 12px; align-items: end; margin-bottom: 18px; }
.reservation-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; }
.reservation-calendar-panel { overflow: hidden; }
.reservation-legend { display: flex; gap: 7px; flex-wrap: wrap; }
.reservation-legend span { padding: 5px 8px; border-radius: 12px; font-size: 9px; font-weight: 700; }
.reservation-legend .pending { background: #fff0da; color: #9a5a1f; }
.reservation-legend .confirmed { background: #e1f2e9; color: #176b4b; }
.reservation-legend .seated { background: #e6eef7; color: #35688e; }
.reservation-day-list { display: grid; gap: 8px; }
.reservation-time-row { display: grid; grid-template-columns: 62px 1fr; gap: 10px; min-height: 42px; }
.reservation-time-label { padding-top: 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.reservation-time-items { display: flex; gap: 7px; flex-wrap: wrap; padding: 5px; border-bottom: 1px solid var(--line); }
.reservation-card { min-width: 170px; max-width: 240px; border: 1px solid var(--line); border-left: 4px solid #d6a24d; background: white; border-radius: 8px; padding: 8px 10px; text-align: left; color: var(--ink); }
.reservation-card.confirmed { border-left-color: var(--green); }
.reservation-card.seated { border-left-color: var(--blue); }
.reservation-card.cancelled, .reservation-card.no-show { opacity: .55; border-left-color: var(--red); }
.reservation-card b, .reservation-card small { display: block; }
.reservation-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.reservation-week-grid { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; }
.reservation-week-day { min-height: 300px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfa; }
.reservation-week-day h4 { margin: 0 0 10px; font-size: 11px; }
.reservation-week-day .reservation-card { min-width: 0; width: 100%; margin-bottom: 7px; }
.reservation-table-list { display: grid; gap: 8px; }
.reservation-table-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; }
.reservation-table-item b, .reservation-table-item small { display: block; }
.reservation-table-item small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.reservation-list-panel { margin-top: 18px; }
.reservation-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.reservation-settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reservation-settings-form .checkbox-row, .reservation-settings-form .primary-button { grid-column: 1 / -1; }
.reservation-settings-form label small { color: var(--muted); }
.widget-help { margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.widget-code { margin-bottom: 12px; background: #102d24; color: #dceae4; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.5; }
.cv-retention-notice { margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; background: #fff8e6; color: #745616; font-size: 11px; line-height: 1.55; }
.cv-toolbar { display: grid; grid-template-columns: minmax(260px, 2fr) 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.cv-toolbar input, .cv-toolbar select { min-width: 0; }
.release-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; }
.restaurant-form { display: grid; gap: 12px; }
.restaurant-form .primary-button { margin-top: 5px; }
.release-item { border-left: 3px solid var(--green); padding: 2px 0 18px 18px; margin-bottom: 15px; }
.release-item:last-child { margin-bottom: 0; }
.release-item h4 { margin: 0 0 4px; }
.release-item small { color: var(--muted); }
.release-item ul { margin: 12px 0 0; padding-left: 18px; color: #4e5d55; font-size: 12px; line-height: 1.8; }
.ocr-notice { grid-column: 1 / -1; border-radius: 10px; padding: 12px 14px; background: #fff8e9; color: #765223; font-size: 12px; line-height: 1.5; }
.category-row { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 12px; margin: 15px 0; font-size: 12px; }
.progress { height: 8px; background: #eef2ef; border-radius: 8px; overflow: hidden; }.progress i { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.empty { padding: 35px 10px; text-align: center; color: var(--muted); }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: #0b1f19b8; backdrop-filter: blur(3px); }
.modal-card { position: relative; background: white; border-radius: 18px; width: min(680px, 100%); max-height: 90vh; overflow: auto; padding: 26px; box-shadow: 0 20px 70px #0004; }
.modal-card.document-modal { width: min(1120px, 96vw); height: min(900px, 92vh); display: flex; flex-direction: column; overflow: hidden; }
.document-modal #modalBody { flex: 1; min-height: 0; }
.document-pages { height: 100%; overflow: auto; padding: 16px; border-radius: 12px; background: #dfe5e1; text-align: center; }
.document-page { display: block; max-width: 100%; height: auto; margin: 0 auto 18px; background: white; box-shadow: 0 8px 28px #0003; }
.document-image-wrap { height: 100%; overflow: auto; padding: 12px; border-radius: 12px; background: #eef2ef; text-align: center; }
.document-image { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 28px #0002; }
.document-loading, .document-error { display: grid; min-height: 300px; place-items: center; color: var(--muted); text-align: center; }
.document-error { color: #a43c31; }
.modal-head { display: flex; justify-content: space-between; margin-bottom: 22px; }.modal-head h2 { margin: 0; }.modal-head > button { border: 0; background: none; font-size: 25px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-grid .full { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.secondary-button { border: 1px solid var(--line); background: white; border-radius: 10px; padding: 12px 17px; color: var(--ink); font-weight: 600; }
.upload-zone { grid-column: 1 / -1; border: 1px dashed #a8bbb1; background: #f6faf7; border-radius: 12px; padding: 18px; text-align: center; color: var(--muted); }
.upload-zone input { border: 0; padding: 8px; }
.upload-status { color: var(--green); font-size: 11px; margin: 6px 0 0; }
.toast { position: fixed; right: 25px; bottom: 25px; padding: 13px 18px; background: var(--green-dark); color: white; border-radius: 9px; font-size: 12px; transform: translateY(80px); opacity: 0; transition: .25s; z-index: 80; box-shadow: 0 12px 30px #0003; }
.toast.show { transform: none; opacity: 1; }
.website-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.website-toolbar label { min-width: 260px; }
.website-status { padding: 10px 14px; border-radius: 10px; background: #edf5f1; color: var(--green); font-size: 12px; font-weight: 700; }
.website-editor { display: grid; gap: 18px; }
.website-editor > .primary-button { justify-self: end; min-width: 180px; }
.translation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.website-history-panel { margin-top: 18px; }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid, .report-grid, .release-layout { grid-template-columns: 1fr; }
  .schedule-controls { grid-template-columns: 1fr 1fr; }
  .schedule-period { grid-column: 1 / -1; }
  .panel.wide { grid-column: auto; }
  .portal-schedule { grid-template-columns: repeat(4, 1fr); }
  .reservation-layout, .reservation-settings-grid { grid-template-columns: 1fr; }
  .reservation-controls { grid-template-columns: 1fr 1fr; }
  .volume-toolbar { grid-template-columns: repeat(3, 1fr); }
  .employee-center-toolbar { grid-template-columns: repeat(3, 1fr); }
  .translation-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .login-layout { grid-template-columns: 1fr; margin-top: 6vh; }.login-copy { display: none; }.login-card { padding: 28px; }
  .app { display: block; }.sidebar { position: fixed; left: -260px; transition: left .25s; width: 245px; }.sidebar.open { left: 0; box-shadow: 10px 0 40px #0005; }
  .menu-button { display: block; }.topbar { height: auto; min-height: 72px; padding: 10px 18px; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }.topbar .compact { margin-left: auto; font-size: 11px; }
  .restaurant-picker { width: 100%; order: 3; margin: 0; }.restaurant-picker select { flex: 1; }
  .content { padding: 24px 16px 50px; }.metric-grid { grid-template-columns: 1fr; }.welcome, .section-head { align-items: flex-start; flex-direction: column; }
  .period-controls, .custom-date-range, .head-actions { width: 100%; }.period-controls { justify-content: flex-start; }.custom-date-range { flex-direction: column; }.custom-date-range label, .period-controls select { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }.form-grid .full, .form-actions, .upload-zone { grid-column: auto; }.mini-metrics { grid-template-columns: 1fr; }
  .access-grid { grid-template-columns: 1fr; }
  .permission-row { grid-template-columns: 1fr; }
  .restaurant-info-grid { grid-template-columns: 1fr; }
  .employee-document-toolbar { grid-template-columns: 1fr; }
  .banking-grid { grid-template-columns: 1fr; }
  .company-document-toolbar { grid-template-columns: 1fr; }
  .employee-center-toolbar, .employee-profile-grid, .employee-profile-sections, #hrMetrics { grid-template-columns: 1fr; }
  .tax-grid, .report-filter-grid { grid-template-columns: 1fr; }
  .volume-toolbar { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; }.toolbar input, .toolbar select { max-width: none; width: 100%; }
  .list-summary, .pagination { align-items: flex-start; flex-direction: column; }
  .pagination { width: 100%; }
  .mail-form, .calculation-box { grid-template-columns: 1fr; }
  .schedule-controls { grid-template-columns: 1fr; }
  .schedule-period { grid-column: auto; }
  .week-navigation { width: 100%; }.week-navigation button { flex: 1; }
  .portal-topbar, .portal-hero { align-items: flex-start; }
  .portal-topbar { padding: 12px 16px; }
  .portal-user > div { display: none; }
  .portal-content { width: min(100% - 24px, 1240px); padding-top: 24px; }
  .portal-hero { flex-direction: column; }
  .portal-position { width: 100%; }
  .portal-grid { grid-template-columns: 1fr; }
  .portal-wide { grid-column: auto; }
  .portal-wide .panel-head { align-items: flex-start; gap: 12px; flex-direction: column; }
  .portal-wide .panel-head select { width: 100%; }
  .portal-schedule { grid-template-columns: 1fr 1fr; }
  .portal-form-row { grid-template-columns: 1fr; }
  .reservation-controls, .reservation-settings-form, .cv-toolbar, .document-package-form { grid-template-columns: 1fr; }
  .reservation-settings-form .checkbox-row, .reservation-settings-form .primary-button { grid-column: auto; }
  .reservation-week-grid { grid-template-columns: repeat(7, 230px); }
  .website-toolbar { align-items: stretch; flex-direction: column; }
}

@media (max-width: 430px) {
  .portal-schedule, .portal-calculation { grid-template-columns: 1fr; }
}

@page { size: A4 landscape; margin: 8mm; }
@media print {
  body { background: white; }
  body > * { display: none !important; }
  body.printing-schedule #schedulePrintArea { display: block !important; color: #111; font-family: Arial, sans-serif; }
  body.printing-letter #letterPrintArea { display: block !important; color: #111; font-family: Arial, sans-serif; }
}