/* =============================================================================
   Accounting board.

   Only the pieces the ledger needs that the CRM boards never did: document
   totals, the report header/section rows, the line-item grid inside modals, and
   a wide modal for those grids. Everything else (.dt, .dt-group, .kpi-card,
   .tag, .toolbar, .mdl) is reused as-is from styles.css / extra.css / theme.css.

   Loaded last so it can lean on every token defined before it.
   ============================================================================= */

/* ── document totals (invoice / bill / journal footers) ─────────────────── */
.acc-tot{
  margin:14px 0 4px;
  margin-left:auto;
  max-width:340px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.acc-tot > div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:8px 12px;
  font-size:13px;
  border-bottom:1px solid var(--line-soft);
}
.acc-tot > div:last-child{border-bottom:0}
.acc-tot span{color:var(--ink-soft)}
.acc-tot b{font-variant-numeric:tabular-nums;font-weight:600}
.acc-tot__grand{
  background:var(--canvas);
  font-size:14px;
}
.acc-tot__grand b{font-weight:800;font-size:15px}

/* ── line-item grid inside a modal ──────────────────────────────────────── */
/* The shared .dt table is read-only elsewhere; here every cell holds a control,
   so the padding drops and inputs go full-bleed inside their cell.            */
.lntbl td{padding:4px 6px;vertical-align:middle}
.lntbl th{padding:8px 6px}
.lntbl input,
.lntbl select{
  width:100%;
  min-width:0;
  padding:6px 8px;
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--r-sm,6px);
  font-size:13px;
  background:var(--bg);
  color:var(--ink);
}
.lntbl input:focus,
.lntbl select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,115,234,.15)}
.lntbl input[type="number"]{text-align:right;font-variant-numeric:tabular-nums}
.lntbl .ln-amt{
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  white-space:nowrap;
}
.lntbl .ln-del,
.lntbl .je-del{padding:4px 6px;font-size:13px;line-height:1}

/* A modal holding a line grid needs far more room than the standard form. */
.mdl--wide{max-width:960px;width:calc(100vw - 48px)}

/* ── report canvas ──────────────────────────────────────────────────────── */
.acc-rep-bar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 0 14px;
}
.acc-rep-bar select,
.acc-rep-bar input{
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:var(--r-sm,6px);
  font-size:13px;
  background:var(--bg);
  color:var(--ink);
}
.acc-rep-bar label{font-size:12px;color:var(--ink-soft);margin-left:4px}

.acc-report{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}
.acc-report__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding-bottom:14px;
  margin-bottom:16px;
  border-bottom:2px solid var(--ink);
}
.acc-report__head h2{margin:0 0 2px;font-size:20px;font-weight:800}
.acc-report__head .sub{font-size:12px;color:var(--ink-soft)}
/* Reports nest .dt-group/.dt-card; strip their outer chrome so the report reads
   as one continuous statement rather than a stack of cards. */
.acc-report .dt-card{border:0;box-shadow:none;border-radius:0}
.acc-report .dt-group{margin-bottom:18px}

/* Statement structure rows. */
.acc-report .acc-sec td{
  padding-top:16px;
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.acc-report .acc-sub td{
  border-top:1px solid var(--line);
  font-weight:700;
  background:var(--canvas);
}
.acc-report .acc-total td{
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--ink);
  font-weight:800;
  font-size:14px;
  background:var(--canvas);
}
.acc-report .num,
.acc-report .nm.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* ── overview feed ──────────────────────────────────────────────────────── */
.feed__row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:9px 12px;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
}
.feed__row:last-child{border-bottom:0}
.feed__dot{
  width:8px;height:8px;
  border-radius:50%;
  flex:0 0 auto;
  margin-top:6px;
}
.feed__row .sub{font-size:11px;color:var(--ink-mute);margin-top:2px}

/* Clickable document number in a table cell. */
.lnk{color:var(--blue);cursor:pointer;font-weight:600}
.lnk:hover{text-decoration:underline}

/* ── tab strip + language pill ──────────────────────────────────────────── */
/* The strip scrolls sideways on its own; the pill sits outside it at the inline
   END, so it lands on the right in English and the left in Arabic with no
   mirrored rule and stays reachable at any width. */
.acc-tabbar{
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);
  margin-bottom:10px;
}
.acc-tabbar .tabs{
  flex:1;min-width:0;
  border-bottom:0;margin-bottom:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.acc-tabbar .tabs::-webkit-scrollbar{display:none}
/* Segmented two-state control: both languages visible, the active one raised.
   Direction-agnostic — English always sits first in source order, and RTL
   simply reverses the row, which is the correct reading order either way. */
.acc-lang{
  flex:0 0 auto;align-self:center;
  display:inline-flex;align-items:center;gap:2px;
  margin-bottom:6px;padding:3px;
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:999px;
}
.acc-lang__globe{
  display:grid;place-items:center;
  padding-inline:6px 2px;
  color:var(--ink-mute);
}
.acc-lang__opt{
  background:none;border:none;border-radius:999px;
  padding:5px 12px;
  font:inherit;font-size:12.5px;font-weight:600;
  color:var(--ink-soft);cursor:pointer;white-space:nowrap;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.acc-lang__opt:hover{color:var(--ink)}
.acc-lang__opt.is-on{
  background:var(--bg,#fff);
  color:var(--blue);
  box-shadow:0 1px 3px rgba(16,24,40,.14);
  cursor:default;
}

/* Codes, amounts and ISO date ranges read left-to-right even inside Arabic. */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* =============================================================================
   RIGHT-TO-LEFT (Arabic)

   acc-i18n.js puts dir="rtl" on #main, #modal-root and #toast and adds .acc-rtl
   to <body> while the ledger is showing Arabic. dir alone already reverses the
   flex rows and the table column order; what remains here is the handful of
   places that were written with PHYSICAL left/right values.

   Numbers never flip — but which cells hold numbers isn't knowable from the
   markup (the same .nm class carries both a customer name and a balance), so
   instead of hard-coding direction per class every cell gets
   unicode-bidi:plaintext. That resolves each cell's direction from its own
   first strong character: an Arabic name reads RTL, "-$1,200.00" has no strong
   character at all and therefore falls back to LTR with its sign intact.
   ============================================================================= */
.acc-rtl .acc-tot{margin-left:0;margin-right:auto}
.acc-rtl .acc-rep-bar label{margin-left:0;margin-right:4px}
.acc-rtl .kpi-ic{margin-left:0;margin-right:auto}
.acc-rtl .toolbar__collapse{margin-left:0;margin-right:auto}
.acc-rtl .new-btn__caret{border-left:0;border-right:1px solid rgba(255,255,255,.25)}

.acc-rtl .dt th,
.acc-rtl .dt td,
.acc-rtl .acc-tot b,
.acc-rtl .kpi-card .big,
.acc-rtl .kpi-card .sub,
.acc-rtl .feed__row .sub{unicode-bidi:plaintext}
/* Numeric columns hug the far edge, the way they do in the English layout —
   which under RTL is the left one. */
.acc-rtl .dt th{text-align:right}
.acc-rtl .dt th.num,
.acc-rtl .dt td.num,
.acc-rtl .acc-report .num,
.acc-rtl .acc-report .nm.num{text-align:left}
/* Always-numeric fields can be pinned outright. */
.acc-rtl .lntbl .ln-amt{direction:ltr;text-align:left}
.acc-rtl .lntbl input[type="number"]{direction:ltr;text-align:left}

/* Form controls follow whatever the operator types into them. */
.acc-rtl .mdl__b input,
.acc-rtl .mdl__b textarea{unicode-bidi:plaintext}
.acc-rtl .mdl__b input[type="number"],
.acc-rtl .mdl__b input[type="date"]{direction:ltr;text-align:left}

/* ── print: the report only ─────────────────────────────────────────────── */
@media print{
  .app__top,.app__side,.side-toggle,.bh__actions,.tabs,.toolbar,
  .acc-rep-bar,.acc-tabbar,.fab,#ai-root,#toast{display:none !important}
  .app{display:block !important}
  .app__main{padding:0 !important;overflow:visible !important}
  .acc-report{border:0;padding:0}
  .dt-card{overflow:visible !important}
  table.dt{page-break-inside:auto}
  tr{page-break-inside:avoid}
}

/* ── phones ─────────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .mdl--wide{width:calc(100vw - 20px);max-width:none}
  .acc-tot{max-width:none;margin-left:0}
  .acc-report{padding:12px}
  /* The line grid is the one table that must NOT become one-card-per-row —
     it is an editing grid, so it scrolls sideways instead. */
  .lntbl{min-width:640px}
  .lntbl thead{display:table-header-group !important}
  .lntbl tr{display:table-row !important}
  .lntbl td{display:table-cell !important}
  .lntbl td::before{display:none !important}

  /* responsive.css turns each row into a card with the data-label printed on
     one side and the value on the other, using physical left/right. Mirror it. */
  .acc-rtl .dt tbody td{text-align:left}
  .acc-rtl .dt tbody td::before{text-align:right}
  .acc-rtl .dt tbody tr td:first-child{text-align:right}
  .acc-rtl .acc-tot{margin-right:0}
}