/* Monthly report. Dark mode uses the app's Desert Night surfaces.
   Sand cards are for the light theme and for print. No new typefaces. */
@font-face { font-family: "Instrument Sans"; src: url("/_next/static/media/f06bf9da926bae75-s.p.2874ccu1_u7jf.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-display: swap; unicode-range: U+0020-00FF, U+0102, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0304, U+0308, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2191, U+2193, U+2212; }
@font-face { font-family: "Instrument Serif"; src: url("/_next/static/media/e41d5df559864f9e-s.p.1g73gv09-xcb6.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/_next/static/media/99e609270109b47d-s.p.40sczeszzbjw1.woff2") format("woff2"); font-style: normal; font-weight: 400 500; font-display: swap; }

#panel-monthly-report.mr {
  --mr-night: #0c0a07;
  --mr-sand: #f3f0e9;
  --mr-paper: #f7f5ee;
  --mr-oasis: #00d492;
  --mr-link: #9bc8a7;
  --mr-mint: #9bc8a7;
  --mr-apricot: #d7ac78;
  --mr-lilac: #c8b4e8;
  --mr-blue: #afc9d9;
  --mr-signal: #f05751;
  --mr-ink: #f6f0e5;
  --mr-muted: #b8afa0;
  --mr-line: #40392e;
  --mr-card: #1b1812;
  --mr-elevated: #2d2a20;
  --mr-row: #242018;
  --mr-input: #29241b;
  --mr-sans: "Instrument Sans", "IBM Plex Sans Arabic", sans-serif;
  --mr-display: "Instrument Serif", Georgia, serif;
  --mr-mono: "IBM Plex Mono", ui-monospace, monospace;
  --mr-ease: cubic-bezier(.22, 1, .36, 1);
  background: var(--bg, #0c0a07);
  color: var(--mr-ink);
  font-family: var(--mr-sans);
  padding: clamp(20px, 3vw, 40px);
}

html[data-theme="dark"] #panel-monthly-report.mr {
  background: #0c0a07;
  color: #f6f0e5;
}
html[data-theme="dark"] #panel-monthly-report .mr-card {
  background: #1b1812;
  color: #f6f0e5;
  border-color: #40392e;
}
html[data-theme="dark"] #panel-monthly-report .mr-value,
html[data-theme="dark"] #panel-monthly-report .mr-title,
html[data-theme="dark"] #panel-monthly-report .mr-bar-name,
html[data-theme="dark"] #panel-monthly-report .mr-bar-value { color: #f6f0e5; }
html[data-theme="dark"] #panel-monthly-report .mr-figure { color: #00d492; }
html[data-theme="dark"] #panel-monthly-report .mr-overdue { color: #f05751; }
html[data-theme="dark"] #panel-monthly-report .mr-track { background: #2d2a20; }
html[data-theme="dark"] #panel-monthly-report .mr-table tr:nth-child(even) td { background: #242018; color: #f6f0e5; }
html[data-theme="light"] #panel-monthly-report.mr {
  --mr-link: #176347;
  --mr-ink: #0c0a07;
  --mr-muted: #5c5449;
  --mr-line: #d6d2ca;
  --mr-card: #f7f5ee;
  --mr-elevated: #f3f0e9;
  --mr-row: #0c0a0708;
  --mr-input: #fff;
  background: #f7f5ee;
  color: #0c0a07;
}

html[lang="ar"] #panel-monthly-report.mr {
  --mr-sans: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --mr-display: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

.mr-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 40px; align-items: flex-end; margin-bottom: 28px; }
.mr-kicker { margin: 0 0 8px; color: var(--mr-link); font-family: var(--mr-sans); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html[lang="ar"] .mr-kicker { letter-spacing: 0; text-transform: none; }
.mr-title { margin: 0; font-family: var(--mr-display); font-size: clamp(40px, 5vw, 64px); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; color: var(--mr-ink); }
html[lang="ar"] .mr-title { font-weight: 600; letter-spacing: 0; line-height: 1.35; }
.mr-lead, .mr-note { margin: 12px 0 0; max-width: 62ch; color: var(--mr-muted); font-size: 16px; line-height: 1.6; }
.mr-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.mr-period { margin: 16px 0 0; color: var(--mr-ink); font-size: 20px; font-weight: 500; }
.mr-feedback { margin: 0 0 16px; color: var(--mr-link); line-height: 1.6; }
.mr-feedback:empty { display: none; }
.mr-state { padding: 32px; border: 1px solid var(--mr-line); border-radius: 24px; background: var(--mr-card); color: var(--mr-ink); }
.mr-state-title { margin: 0; color: inherit; font-family: var(--mr-display); font-size: 30px; font-weight: 400; line-height: 1.3; }
.mr-state .mr-button { margin-top: 20px; }
.mr-button:disabled { opacity: .55; cursor: default; }
.mr-field { display: flex; flex-direction: column; gap: 6px; color: var(--mr-muted); font-family: var(--mr-mono); font-size: 12px; }
.mr-field input, .mr-button {
  min-height: 44px; min-width: 44px; border-radius: 999px; border: 1px solid var(--mr-line);
  font-family: var(--mr-sans); font-size: 15px; color: var(--mr-ink); background: var(--mr-input);
}
.mr-field input { padding: 0 16px; }
.mr-button { padding: 0 18px; cursor: pointer; }
.mr-button-primary { background: var(--mr-elevated); color: var(--mr-ink); border-color: var(--mr-line); }
html[data-theme="light"] .mr-button-primary { background: var(--mr-night); color: var(--mr-paper); border-color: var(--mr-night); }
.mr :is(a, button, input, summary, [tabindex]):focus-visible { outline: 3px solid var(--mr-link); outline-offset: 3px; }

.mr-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.mr-grid > *, .mr-best-split > *, .mr-head > * { min-inline-size: 0; }
.mr-card, .mr-hero {
  border: 1px solid var(--mr-line); border-radius: 26px; padding: 24px 26px;
  box-shadow: none; backdrop-filter: none;
}
.mr-card { background: #1b1812; color: #f6f0e5; }
html[data-theme="light"] #panel-monthly-report .mr-card {
  border-color: #ffffffd9;
  background: linear-gradient(145deg, #ffffffc7, #f4f8f0ad);
  box-shadow: inset 0 1px 0 #fff, 0 18px 40px #19402b14, 0 0 28px #00d49214;
  backdrop-filter: blur(18px) saturate(1.3);
}
.mr-hero { grid-column: 1 / -1; display: grid; gap: 8px; background: var(--mr-night); color: #f6f0e5; border-color: var(--mr-night); box-shadow: 0 18px 40px #0c0a0714, 0 0 32px #00d4921f; }
.mr-hero .mr-kicker { color: var(--mr-mint); }
.mr-figure { margin: 0; color: #00d492; font-family: var(--mr-display); font-size: clamp(48px, 7vw, 88px); font-weight: 400; line-height: 1; letter-spacing: -.03em; }
html[lang="ar"] .mr-figure { font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.mr-span-4 { grid-column: span 4; }
.mr-span-6 { grid-column: span 6; }
.mr-span-12 { grid-column: 1 / -1; }
.mr-label { margin: 0; color: var(--mr-link); font-family: var(--mr-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
html[lang="ar"] .mr-label { letter-spacing: 0; text-transform: none; }
.mr-value { margin: 8px 0 0; color: #f6f0e5; font-family: var(--mr-display); font-size: clamp(28px, 3vw, 40px); font-weight: 400; line-height: 1.1; }
.mr-value.mr-value-message { font-family: var(--mr-sans); font-size: 16px; line-height: 1.6; }
html[data-theme="light"] #panel-monthly-report .mr-value { color: #0c0a07; }
html[lang="ar"] .mr-value { font-weight: 600; line-height: 1.35; }
.mr-overdue { color: #f05751; }
html[data-theme="light"] #panel-monthly-report .mr-overdue { color: #f05751; }
.mr-card p, .mr-hero p { margin: 8px 0 0; }
.mr-best-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 28px; margin-top: 8px; }
.mr-best-cash h3, .mr-best-hours h3 { margin-top: 18px; }
.mr-invoice-sources { padding: 16px 20px; border: 1px solid var(--mr-line); border-radius: 16px; background: var(--mr-card); }
.mr-invoice-sources .mr-note { max-inline-size: none; padding-inline-start: 20px; overflow-wrap: anywhere; }
.mr-invoice-sources li + li { margin-block-start: 6px; }

.mr-bars { display: grid; gap: 12px; margin-top: 16px; }
.mr-bar { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.mr-bar-name, .mr-bar-value { font-size: 14px; color: var(--mr-ink); }
.mr-track { height: 14px; border-radius: 999px; background: var(--mr-elevated); overflow: hidden; }
.mr-fill { display: block; height: 100%; border-radius: inherit; }
.mr-table-scroll { min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
#panel-monthly-report .mr-table-scroll .mr-table { display: table; inline-size: 100%; min-inline-size: max-content; max-inline-size: none; overflow: visible; }
#panel-monthly-report .mr-table { width: 100%; min-width: 0; margin-top: 18px; border-collapse: collapse; background: transparent; color: var(--mr-ink); font-size: 14px; }
#panel-monthly-report .mr-table caption { text-align: start; margin-bottom: 8px; color: var(--mr-muted); font-family: var(--mr-mono); font-size: 12px; }
#panel-monthly-report .mr-table th,
#panel-monthly-report .mr-table td { padding: 10px 8px; border-bottom: 1px solid var(--mr-line); background: transparent; color: var(--mr-ink); text-align: start; position: static; }
#panel-monthly-report .mr-table tr:nth-child(even) td { background: var(--mr-row); }
#panel-monthly-report .mr-table th { color: var(--mr-muted); font-weight: 500; }

@media (max-width: 800px) {
  .mr-span-4, .mr-span-6 { grid-column: 1 / -1; }
  .mr-bar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .mr-tools { inline-size: 100%; }
  .mr-field { inline-size: 100%; }
  .mr-field input { min-inline-size: 0; inline-size: 100%; box-sizing: border-box; }
  .mr-tools .mr-button { flex: 1 1 auto; }
  .mr-card, .mr-hero, .mr-state { padding: 20px 16px; }
  .mr-figure, .mr-value { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  #panel-monthly-report.mr, #panel-monthly-report.mr * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  #panel-monthly-report .mr-card { background: var(--mr-card); backdrop-filter: none; box-shadow: none; }
}
@media (forced-colors: active) {
  .mr-card, .mr-hero, .mr-button, .mr-field input { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; backdrop-filter: none; }
  .mr-figure, .mr-overdue { color: CanvasText; }
}
@media print {
  #panel-monthly-report.active :is(.mr-table-scroll, .mr-table) { overflow: visible !important; min-inline-size: 0 !important; max-inline-size: 100% !important; }
  #panel-monthly-report.active .mr-table { display: table !important; table-layout: fixed; }
  #panel-monthly-report.active .mr-table :is(th,td) { white-space: normal !important; overflow-wrap: anywhere; }
  #panel-monthly-report.active .mr-invoice-sources { background: #f7f5ee !important; border-color: #d6d2ca !important; }
  html[data-route="monthly-report"]:not(#_),
  html[data-route="monthly-report"]:not(#_) body,
  html[data-route="monthly-report"]:not(#_) body .workspace-framed { height: auto !important; min-height: 0 !important; overflow: visible !important; background: #f7f5ee !important; }
  html[data-route="monthly-report"]:not(#_) body :is(.top, .tabs, .brand, .workspace-navigation-sidebar, .workspace-utilities, .workspace-mobile-nav, .workspace-chrome-feedback, .workspace-notices, .toast, #backup-nudge, #timer-root, #first-run-root, .mr-tools, footer) { display: none !important; }
  html[data-route="monthly-report"]:not(#_) body,
  html[data-route="monthly-report"]:not(#_) body :is(.app-shell, .workspace, main) { display: block !important; margin: 0 !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #f7f5ee !important; color: #0c0a07 !important; box-shadow: none !important; border: 0 !important; }
  #panel-monthly-report.active.mr { display: block !important; background: #f7f5ee !important; color: #0c0a07 !important; box-shadow: none !important; }
  #panel-monthly-report.active .mr-card { background: #f7f5ee !important; backdrop-filter: none !important; box-shadow: none !important; border-color: #d6d2ca !important; color: #0c0a07 !important; }
  #panel-monthly-report.active .mr-hero { background: #0c0a07 !important; color: #f3f0e9 !important; }
  #panel-monthly-report.active .mr-figure { color: #00d492 !important; }
  #panel-monthly-report.active .mr-kicker,
  #panel-monthly-report.active .mr-label { color: #176347 !important; }
  #panel-monthly-report.active .mr-hero .mr-kicker { color: #9bc8a7 !important; }
  #panel-monthly-report.active .mr-note,
  #panel-monthly-report.active .mr-lead,
  #panel-monthly-report.active .mr-table th { color: #5c5449 !important; }
  #panel-monthly-report.active .mr-value,
  #panel-monthly-report.active .mr-title,
  #panel-monthly-report.active .mr-bar-name,
  #panel-monthly-report.active .mr-bar-value { color: #0c0a07 !important; }
  #panel-monthly-report.active .mr-table,
  #panel-monthly-report.active .mr-table th,
  #panel-monthly-report.active .mr-table td { background: #f7f5ee !important; color: #0c0a07 !important; }
  #panel-monthly-report.active .mr-table tr:nth-child(even) td { background: #f3f0e9 !important; }
  #panel-monthly-report.active .mr-overdue,
  #panel-monthly-report.active .mr-value.mr-overdue { color: #f05751 !important; }
  #panel-monthly-report.active .mr-track { background: #0c0a070c !important; }
}