/*
 * MizanFlex application identity — 11 September 2026.
 * Uses the approved supplied artwork, never an approximation of the logo.
 * Screen-only: invoice and receipt printing retain their existing styling.
 */
@media screen {
  :root {
    --mfx-navy: #061630;
    --mfx-blue: #0064ef;
    --mfx-blue-dark: #0051ca;
    --mfx-cyan: #06bdec;
    --mfx-sky: #edf5ff;
    --mfx-line: #dce6f2;
    --mfx-wash: #f4f7fc;
    --ink: #102440;
    --muted: #60738c;
    --brand: var(--mfx-blue);
    --brand2: #0d3268;
    --brand-deep: var(--mfx-navy);
    --gold: var(--mfx-cyan);
    --line: var(--mfx-line);
    --bg: var(--mfx-wash);
    --blue-soft: var(--mfx-sky);
    --shadow: 0 3px 14px #06163004;
  }

  body { background: var(--bg); color: var(--ink); }
  html[lang="en"] body,
  html[lang="en"] input,
  html[lang="en"] select,
  html[lang="en"] textarea,
  html[lang="en"] button { font-family: "Segoe UI", Arial, sans-serif; }
  :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #0064ef80;
    outline-offset: 3px;
  }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--mfx-blue); }
  .brand-wordmark { display: none; }
  .brand-logo { display: block; width: 220px; height: 54px; object-fit: contain; flex: none; }

  /* The original wordmark sits on white, without recoloring or stretching. */
  .appbar {
    background: #fff;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 12px #06163004;
    padding-inline: 32px;
    gap: 20px;
  }
  .appbar::after {
    content: "";
    position: absolute;
    bottom: -1px;
    inset-inline-start: 0;
    width: 235px;
    height: 3px;
    background: linear-gradient(90deg, var(--mfx-blue), var(--mfx-cyan));
  }
  .appbar .brand-logo { width: 205px; height: 52px; }
  .appbar-start, .appbar-end { gap: 20px; }
  .appbar-divider { background: var(--line); }
  .appbar-shortcuts { gap: 6px; }
  .appbar-shortcuts a {
    color: #4d627e;
    padding: 10px 13px;
    border-radius: 8px;
    font-size: 13px;
    transition: background .15s, color .15s;
  }
  .appbar-shortcuts a:hover, .appbar-shortcuts a.active {
    background: var(--mfx-sky);
    color: var(--mfx-blue);
  }
  .menu-trigger { color: var(--ink); background: #f5f8fc; border: 1px solid var(--line); border-radius: 9px; }
  .menu-trigger:hover, .app-menu[open] .menu-trigger { background: var(--mfx-sky); border-color: #bbd5f9; color: var(--mfx-blue); }
  .language-form select { color: #405573; background: transparent; }
  .user-chip { color: var(--ink); }
  .user-chip small { color: var(--muted); }
  .user-avatar { background: var(--mfx-sky); color: var(--mfx-blue); border: 1px solid #d8e9ff; }
  .sidebar { border-radius: 12px; box-shadow: 0 16px 48px #06163026; }
  .menu-heading { color: var(--mfx-navy); }
  .menu-search { border-color: var(--line); background: #f5f8fc; }
  .nav a { color: #425976; border-radius: 8px; }
  .nav a:hover, .nav a.active { background: var(--mfx-sky); color: var(--mfx-blue); }
  .nav a.active { font-weight: 600; }
  .nav .icon-slot { color: inherit; }
  .nav .btn.secondary { color: #b43c48; background: #fff6f6; border-color: #f5dcdf; }
  .nav .btn.secondary:hover { background: #ffeded; }
  .main { padding-top: 26px; }
  .top { margin-bottom: 22px; }
  .top h2 { font-size: 26px; color: var(--mfx-navy); }
  .page-eyebrow { color: var(--muted); }
  .page-date { color: #657893; }
  .app-footer { color: #657893; font-size: 11px; gap: 16px; }
  .app-footer-brand { display: inline-flex; align-items: center; gap: 9px; }
  .app-footer-brand img { display: block; object-fit: contain; flex: none; }

  /* Shared controls: semantic error/success classes and inline colors win. */
  .card { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow); }
  .btn { background: var(--mfx-blue); border-color: var(--mfx-blue); border-radius: 8px; }
  .btn:hover { background: var(--mfx-blue-dark); border-color: var(--mfx-blue-dark); }
  .btn.secondary { background: #fff; color: #385477; border-color: #cfdded; }
  .btn.secondary:hover { background: var(--mfx-sky); color: var(--mfx-blue); border-color: #abcaf4; }
  .btn.danger { background: #bc3344; border-color: #bc3344; color: #fff; }
  .btn.danger:hover { background: #9f2736; border-color: #9f2736; }
  .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
  .form-control { background: #fbfcfe; border-color: #d3dfed; border-radius: 8px; color: var(--ink); }
  .form-control:focus { background: #fff; border-color: var(--mfx-blue); box-shadow: 0 0 0 3px #0064ef12; }
  .form-control::placeholder { color: #7d8da4; }
  .form-field > label, .toolbar label { color: #425976; }
  .form-panel-heading { background: #fcfdff; border-color: var(--line); }
  .form-panel-heading [data-icon], .record-avatar { background: var(--mfx-sky); color: var(--mfx-blue); }
  .form-actions { background: #f7faff; }
  .form-note, .form-panel-heading p { color: var(--muted); }
  .record-search { border-color: #d3dfed; border-radius: 8px; }
  .record-search:focus-within { border-color: var(--mfx-blue); box-shadow: 0 0 0 3px #0064ef12; }
  .record-search [data-icon] { color: #617fa3; }
  .record-search input { color: var(--ink); }
  .records-intro p { color: var(--muted); }
  .table-heading a { color: var(--mfx-blue); font-weight: 600; }
  .table-card .table-heading { padding-block: 19px; }
  th { background: #f2f6fc; color: #506685; font-weight: 500; border-bottom-color: var(--line); }
  td { color: #445b77; border-bottom-color: #e8eef6; }
  td a:not(.btn) { color: var(--mfx-blue); }
  tbody tr:hover { background: #f7faff; }
  .status-pill { border-radius: 5px; font-size: 12px; padding: 5px 9px; }
  .status-pill.status-paid { color: #16734e; background: #eaf8f0; }
  .status-pill.status-confirmed { color: #165aa8; background: #eaf3ff; }
  .status-pill.status-returned { color: #935b04; background: #fff3d9; }
  .status-pill.status-draft { color: #64738a; background: #eef1f6; }
  .status-pill.status-cancelled { color: #ae3246; background: #fff0f2; }
  .empty-state { color: var(--muted); }
  .empty-state [data-icon] { color: #6b8fbb; background: var(--mfx-sky); }
  .collapsible-card { border-inline-start-color: var(--mfx-blue); }
  .subscription-notice { border-color: #efd8a9; background: #fff9eb; color: #785b23; box-shadow: none; padding: 12px 18px; }
  .subscription-notice b { font-size: 13px; font-weight: 500; }
  .subscription-notice .btn { min-height: 35px; padding: 6px 12px; margin-inline-start: 10px; font-size: 12px; }

  /* Dashboard: familiar shortcuts, stronger hierarchy and less visual noise. */
  .welcome-row {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 24px 28px;
    border-radius: 12px;
    background: radial-gradient(ellipse at 15% 100%, #0b3870 0, transparent 60%), var(--mfx-navy);
    color: #fff;
    margin-bottom: 20px;
    min-height: 122px;
  }
  .welcome-row::before { display: none; }
  .welcome-row h1 { color: #fff; font-size: 26px; line-height: 1.5; margin-bottom: 4px; }
  .welcome-row h1 span { color: #fff; }
  .welcome-row p { color: #bed0e8; font-size: 14px; margin: 0; }
  .branch-chip { background: #ffffff09; color: #eef5ff; border: 1px solid #ffffff24; border-radius: 8px; padding: 11px 14px; flex: none; }
  .branch-chip small { color: #adc4e4; }
  .branch-chip [data-icon] { color: #62d7f6; }
  .launch-grid { gap: 14px; }
  .launch-tile { border-color: var(--line); border-radius: 12px; padding: 20px 22px; min-height: 144px; box-shadow: var(--shadow); }
  .launch-tile:hover { border-color: #a9c9f5; box-shadow: 0 6px 20px #0064ef0c; transform: translateY(-2px); }
  .launch-tile strong { font-size: 20px; color: var(--mfx-navy); }
  .launch-tile small { font-size: 12px; color: var(--muted); }
  .tile-icon { width: 40px; height: 40px; border-radius: 10px; margin-bottom: 13px; background: var(--mfx-sky); color: var(--mfx-blue); }
  .tile-icon .ui-icon { width: 23px; height: 23px; }
  .tile-arrow { color: #8299b8; }
  .launch-primary {
    isolation: isolate;
    padding: 27px;
    border-color: #0958c0;
    background: linear-gradient(155deg, #0c3876 0%, #0064ef 100%);
  }
  .launch-primary::before { display: none; }
  .launch-primary::after { display: none; }
  .launch-primary:hover { background: linear-gradient(155deg, #0c3876, #005bdc); border-color: #0064ef; }
  .launch-primary .tile-icon { width: 58px; height: 58px; margin: auto 0 26px; background: #ffffff1c; border: 1px solid #ffffff33; color: #fff; border-radius: 13px; }
  .launch-primary .tile-icon .ui-icon { width: 30px; height: 30px; }
  .launch-primary strong { color: #fff; font-size: 28px; }
  .launch-primary small { color: #dcecff; font-size: 13px; line-height: 1.8; }
  .launch-primary .tile-arrow { color: #fff; }
  .section-heading { margin-top: 28px; margin-bottom: 16px; }
  .section-heading h3 { color: var(--mfx-navy); font-size: 18px; }
  .section-heading > span { color: var(--muted); font-size: 12px; }
  .home-metrics { gap: 14px; }
  .metric { padding: 20px; gap: 14px; }
  .metric-icon { background: var(--mfx-sky); color: var(--mfx-blue); border-radius: 10px; width: 42px; height: 42px; }
  .metric .muted { font-size: 12px; color: #60738c; }
  .metric b { display: inline-block; font-size: 27px; color: var(--mfx-navy); font-variant-numeric: tabular-nums; }
  .metric-unit { display: inline-block; margin-inline-start: 6px; color: #6d809a; font-size: 11px; }
  .home-settings { border-color: var(--line); }
  .home-settings summary { color: #526985; }

  /* Sign-in: an exact logo on a white panel, paired with the navy identity. */
  .login-page { background: #fff; }
  .login-shell { grid-template-columns: 1fr 1fr; }
  .login-hero { background: radial-gradient(ellipse at 5% 100%, #0b3870 0, transparent 65%), var(--mfx-navy); padding: 44px 52px; isolation: isolate; }
  .login-hero::before { display: none; }
  .login-hero::after { display: none; }
  .login-hero > .brand { background: #fff; width: fit-content; padding: 12px 18px; border-radius: 9px; }
  .login-hero .brand-logo { width: 235px; height: 58px; }
  .login-hero-content { max-width: 500px; padding-block: 60px; }
  .login-hero-content > span { color: #71dfff; font-size: 12px; letter-spacing: .04em; }
  .login-hero-content h1 { color: #fff; font-size: clamp(36px, 3.8vw, 55px); line-height: 1.45; margin-top: 18px; letter-spacing: -.03em; }
  .login-hero-content h1 em { font-style: normal; color: #41cff4; }
  .login-hero-content p { color: #b9cce5; font-size: 15px; line-height: 1.9; }
  .login-illustration { gap: 10px; margin-top: 32px; }
  .login-feature { background: #ffffff05; border-color: #ffffff20; border-radius: 9px; padding: 18px 10px; font-size: 12px; color: #e3efff; }
  .login-feature .ui-icon { color: #55d5f6; }
  .login-hero-footer { color: #9ab5d7; font-size: 11px; }
  .login-content { background: #fff; padding: 70px 48px; }
  .login-box { max-width: 390px; }
  .login-lock { background: var(--mfx-sky); color: var(--mfx-blue); border-radius: 12px; width: 48px; height: 48px; }
  .login-box h2 { color: var(--mfx-navy); font-size: 30px; }
  .login-box > p { color: var(--muted); }
  .login-field label { color: #354f70; font-weight: 500; font-size: 14px; }
  .login-field input { border-color: #d0dded; background: #fbfcfe; border-radius: 8px; color: var(--ink); }
  .login-field input:focus { border-color: var(--mfx-blue); box-shadow: 0 0 0 3px #0064ef12; background: #fff; }
  .login-replace-session { color: var(--muted); }
  .login-language select { color: #425b7d; border-color: var(--line); background: #f7faff; border-radius: 7px; }
  .login-submit { margin-top: 5px; border-radius: 8px; font-size: 16px; }
  .login-trust { color: #6b7f99; }
  .login-trust [data-icon] { color: #3888d9; }
  .login-mobile-brand .brand-logo { width: 185px; height: 46px; }

  /* Cashier: retain all workspace sizing, touch targets and transaction logic. */
  .page-pos { background: var(--mfx-wash); }
  .page-pos .appbar .brand-logo { width: 175px; height: 43px; }
  .page-pos .appbar::after { width: 198px; }
  .page-pos .pos-catalog { background: #f2f6fc; }
  .page-pos .catalog-title > [data-icon] { color: var(--mfx-blue); background: #e3efff; border-radius: 10px; }
  .page-pos .catalog-title h1 { color: var(--mfx-navy); }
  .page-pos .catalog-title small { color: var(--muted); }
  .page-pos .catalog-tools { color: #526d8d; }
  .page-pos .catalog-search { background: #fff; border-color: #cfdded; border-radius: 9px; }
  .page-pos .catalog-search:focus-within { border-color: var(--mfx-blue); box-shadow: 0 0 0 3px #0064ef12; }
  .page-pos .catalog-search > [data-icon] { color: #6587af; }
  .page-pos .category-chip { border-color: #d6e2f0; background: #fff; color: #526c8d; border-radius: 7px; }
  .page-pos .category-chip:hover { background: #e5efff; border-color: #a9c9f5; color: var(--mfx-blue); }
  .page-pos .category-chip.active { background: var(--mfx-blue); color: #fff; border-color: var(--mfx-blue); box-shadow: 0 3px 8px #0064ef1a; }
  .page-pos .pos-product-tile { border-color: #dce6f2; border-radius: 10px; box-shadow: 0 2px 4px #06163003; }
  .page-pos .pos-product-tile:hover { border-color: #8fb8f2; box-shadow: 0 5px 16px #0064ef10; }
  .page-pos .pos-product-tile:has(button:focus-visible) { outline-color: var(--mfx-blue); }
  .page-pos .product-caption b { color: var(--ink); }
  .page-pos .product-price { color: var(--mfx-blue); font-variant-numeric: tabular-nums; }
  .page-pos .pos-order { background: #fff; border-color: #d3dfed; }
  .page-pos .order-heading { background: var(--mfx-navy); border-color: var(--mfx-navy); color: #fff; }
  .page-pos .order-heading h2, .page-pos .order-heading [data-icon] { color: #fff; }
  .page-pos .order-heading .ui-icon { color: #7fbbff; }
  .page-pos .order-heading small { color: #b6cbe7; }
  .page-pos .order-heading button { color: #ccdcf1; }
  .page-pos .order-empty { color: #7a8da7; }
  .page-pos .order-empty > [data-icon] { background: var(--mfx-sky); color: #6296d3; }
  .page-pos .order-line { border-bottom-color: #e6edf6; }
  .page-pos .order-line.selected { background: #edf5ff; box-shadow: inset -3px 0 var(--mfx-blue); }
  html[dir="ltr"] .page-pos .order-line.selected { box-shadow: inset 3px 0 var(--mfx-blue); }
  .page-pos .order-totals { background: #fbfcff; border-color: var(--line); }
  .page-pos .order-grand-total { color: var(--mfx-navy); }
  .page-pos .order-grand-total strong { color: var(--mfx-blue); font-variant-numeric: tabular-nums; }
  .page-pos .order-grand-total small { color: #597594; }
  .page-pos .order-actions { border-color: var(--line); }
  .page-pos .order-keyboard { border-top-color: var(--line); }
  .page-pos #completeSale { background: var(--mfx-blue) !important; color: #fff; }
  .page-pos #completeSale:hover:not(:disabled) { background: var(--mfx-blue-dark) !important; }
  .page-pos #completeSale:disabled { background: #7ba9e8 !important; opacity: 1; color: #fff; }
  .page-pos .pos-numpad button { background: #fff; color: #243e61; border-color: #e0e8f3; }
  .page-pos .pos-numpad button:hover { background: #edf5ff; }
  .page-pos .pos-numpad .pad-mode { background: #f4f7fc; color: #587394; }
  .page-pos .pos-numpad .pad-mode.active { background: #e7f1ff; color: #0056cf; box-shadow: inset 0 0 0 1px #a8c9f7; }
  .page-pos .pos-numpad .pad-remove { color: #bb3d50; background: #fff6f7; }
  .page-pos #paymentChoices .quick-payment { background: var(--mfx-sky); color: #155bb3; border-color: #c3daf8; }
}

@media screen and (min-width: 900px) and (max-height: 750px) {
  .page-pos .order-empty { min-height: 85px; padding: 10px 12px; }
  .page-pos .order-empty > [data-icon] { width: 36px; height: 36px; margin-bottom: 6px; border-radius: 10px; }
  .page-pos .order-empty .ui-icon { width: 23px; height: 23px; }
  .page-pos .order-empty h3 { font-size: 15px; margin-bottom: 3px; }
  .page-pos .order-empty p { font-size: 12px; }
  .page-pos .order-keyboard { grid-template-rows: minmax(0, 1fr); }
  .page-pos #completeSale { gap: 5px; padding: 10px 6px; }
  .page-pos #checkoutLabel { font-size: 14px; line-height: 1.4; }
}
@media screen and (max-width: 1100px) {
  .appbar { padding-inline: 24px; gap: 14px; }
  .appbar-start, .appbar-end { gap: 14px; }
  .appbar-shortcuts a { padding-inline: 8px; font-size: 12px; }
  .launch-tile { padding: 19px; }
  .launch-tile strong { font-size: 18px; }
  .launch-primary { padding: 24px; }
  .launch-primary strong { font-size: 26px; }
  .login-hero { padding: 38px 34px; }
  .login-content { padding-inline: 34px; }
  .login-feature { font-size: 11px; padding-inline: 7px; }
}
@media screen and (max-width: 700px) {
  .appbar { padding-inline: 14px; gap: 8px; }
  .appbar-start { gap: 8px; }
  .appbar-end { gap: 7px; }
  .appbar .brand-logo, .page-pos .appbar .brand-logo { width: 155px; height: 39px; }
  .appbar::after, .page-pos .appbar::after { width: 170px; }
  .menu-trigger { min-width: 36px; min-height: 38px; padding: 7px; }
  .language-form select { max-width: 76px; }
  .main { padding-top: 20px; }
  .top h2 { font-size: 23px; }
  .welcome-row { padding: 20px; gap: 18px; flex-direction: column; min-height: 0; margin-bottom: 16px; }
  .welcome-row h1 { font-size: 24px; }
  .welcome-row p { font-size: 13px; }
  .branch-chip { padding: 7px 10px; font-size: 11px; }
  .branch-chip small { font-size: 10px; }
  .launch-grid { gap: 11px; }
  .launch-tile { min-height: 139px; padding: 17px; }
  .launch-tile strong { font-size: 18px; }
  .launch-tile small { font-size: 11px; line-height: 1.7; }
  .launch-tile:not(.launch-primary) small { padding-inline-end: 20px; }
  .launch-primary { min-height: 188px; padding: 22px; }
  .launch-primary .tile-icon { width: 43px; height: 43px; margin: 0 0 16px; border-radius: 10px; }
  .launch-primary .tile-icon .ui-icon { width: 25px; height: 25px; }
  .launch-primary strong { font-size: 25px; }
  .home-metrics { gap: 11px; }
  .metric { padding: 15px 12px; align-items: flex-start; gap: 10px; }
  .metric-icon { width: 30px; height: 30px; border-radius: 8px; }
  .metric .muted { font-size: 11px; }
  .metric b { font-size: 22px; }
  .metric-unit { display: block; margin: 0; font-size: 10px; }
  .section-heading { margin-top: 24px; }
  .section-heading h3 { font-size: 17px; }
  .app-footer { align-items: flex-start; flex-wrap: wrap; font-size: 10px; }
  .subscription-notice .btn { display: flex; width: fit-content; margin: 10px 0 0; }
  .login-content { padding: 120px 26px 32px; }
  .login-mobile-brand { top: 24px; inset-inline-start: 26px; }
  .login-language { top: 30px; inset-inline-end: 26px; }
  .login-box { max-width: 420px; }
  .login-box h2 { font-size: 28px; }
  .page-pos .appbar { padding-inline: 14px; }
}
@media screen and (max-width: 380px) {
  .appbar .brand-logo, .page-pos .appbar .brand-logo { width: 135px; height: 34px; }
  .appbar-start, .appbar-end { gap: 4px; }
  .appbar .user-avatar { display: none; }
  .welcome-row { padding: 18px; }
  .metric { gap: 8px; flex-direction: column; }
  .metric b { font-size: 20px; }
  .metric-icon { width: 26px; height: 26px; }
  .login-mobile-brand .brand-logo { width: 157px; height: 39px; }
  .login-content { padding-inline: 22px; }
  .login-language { inset-inline-end: 22px; }
  .login-mobile-brand { inset-inline-start: 22px; }
}
@media screen and (prefers-reduced-motion: reduce) {
  .launch-tile { transition: none; }
  .launch-tile:hover { transform: none; }
}