/* List toolbar extras (public/js/admin/list.js, list-favs.js, list-bulk.js): favourites, column chooser, export menu, ticked rows, 2nd group level */
.fav-wrap { position: relative; display: inline-flex; }
.fav-btn.on { border-color: var(--accent); color: var(--accent-d); }
.fav-btn .ico + span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-menu, .list-menu { min-width: 250px; max-width: min(340px, calc(100vw - 16px)); max-height: min(70vh, 520px); overflow-y: auto; inset-inline-start: 0; inset-inline-end: auto; }
.toolbar > .fav-wrap:last-child .menu, .toolbar .grow ~ .fav-wrap .menu, .tb-tools > .fav-wrap .menu { inset-inline-start: auto; inset-inline-end: 0; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.fav-item { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.fav-item.on { background: var(--accent-soft); }
.menu .fav-item .fav-apply { flex: 1 1 auto; min-width: 0; }
.fav-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-tag { flex: 0 0 auto; font-size: 11px; font-weight: 650; color: var(--muted); background: var(--panel-3); border-radius: 999px; padding: 1px 8px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .fav-more { width: 34px; flex: 0 0 34px; justify-content: center; padding: 6px; }
.fav-def { color: var(--warn); }
.fav-def svg { fill: currentColor; }
.fav-empty { padding: 10px; font-size: 13px; line-height: 1.45; }
.fav-form { display: grid; gap: 14px; }
.fav-form .check, .col-opt { display: flex; align-items: flex-start; gap: 10px; line-height: 1.35; cursor: pointer; }
.fav-form .check input, .col-opt input { margin-top: 2px; width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--accent); }
.fav-opts { display: grid; gap: 6px; }
.fav-opts .fav-opt { justify-content: flex-start; width: 100%; }
.fav-opts .fav-opt.danger { color: var(--danger-ink); }
.cols-menu .col-opt { padding: 7px 10px; border-radius: 8px; font-weight: 550; }
.cols-menu .col-opt:hover { background: var(--panel-3); }

/* ticked rows */
.data-table .sel-cell { width: 40px; padding-inline: 12px 4px; }
.data-table .sel-cell input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--r);
  position: fixed; bottom: 18px; left: 50%; translate: -50% 0; z-index: 40; width: max-content; max-width: calc(100vw - 32px); box-shadow: var(--shadow-lg); }   /* floats over the page: ticking a row never moves the rows */
.bulk-bar[hidden] { display: none; }
.bulk-count { padding-inline: 4px; }
.bulk-bar .bulk-danger { color: var(--danger-ink); }

/* second group level */
.data-table tr.grp-l2 td { background: var(--panel-2); font-weight: 600; }
.data-table tr.grp-l2 td:first-of-type:not(.sel-cell), .data-table tr.grp-l2 td.sel-cell + td { padding-inline-start: 34px; }
.data-table tr.in-grp2 td:first-of-type:not(.sel-cell), .data-table tr.in-grp2 td.sel-cell + td { padding-inline-start: 34px; }

.toast-warn { background: var(--warn-soft); color: var(--warn-ink); border: 1px solid var(--warn); }

@media (max-width: 720px) {
  .fav-btn .ico + span { max-width: 110px; }
  /* phones: the Favourites / Columns / Export menus open as a sheet above the bottom bar (a dropdown would run off the screen) */
  .fav-wrap .fav-menu, .fav-wrap .list-menu { position: fixed; inset-inline: 8px; top: auto; bottom: calc(var(--bn-h, 0px) + 8px); width: auto; max-width: none; max-height: 62vh; translate: none !important; z-index: 60; }
  .hide-sm-label.fav-btn.on span:not(.ico) { display: inline; }   /* the name of the open favourite stays readable on a phone */
  /* phone cards: the tick box sits in the card's top corner; the next cell is the card title */
  .list-body .data-table tr:has(> td.sel-cell) { position: relative; padding-inline-end: 52px; }
  .list-body .data-table td.sel-cell { position: absolute; top: 8px; inset-inline-end: 6px; width: auto; padding: 6px !important; }
  .list-body .data-table td.sel-cell input { width: 22px; height: 22px; }
  .list-body .data-table td.sel-cell + td { justify-content: flex-start; text-align: start; font-size: 14.5px; margin-bottom: 2px; }
  .list-body .data-table td.sel-cell + td[data-label]::before { content: none; }
  .list-body .data-table tr.group-row td.sel-cell, .list-body .data-table tfoot td.sel-cell { display: none; }
  .list-body .data-table tr.grp-l2 td, .list-body .data-table tr.in-grp2 td { padding-inline-start: 0 !important; }
  .list-body .data-table tr.grp-l2 { padding-inline-start: 30px; }
  .bulk-bar { bottom: calc(var(--bn-h, 0px) + 10px); width: calc(100vw - 24px); }
}

/* dashboard pins (public/js/admin/dash-pins.js): the "Pinned" strip of the home and app dashboards */
.pin-strip { display: grid; gap: 10px; margin-bottom: 16px; }
.pin-strip[hidden] { display: none; }
.pin-strip-h { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0; }
.pin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pin-card { display: grid; gap: 4px; align-content: start; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); color: inherit; text-decoration: none; min-width: 0; }
.pin-card:hover { border-color: var(--accent); }
.pin-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pin-head b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-head .pin-rm { margin: -6px; opacity: .55; }
.pin-card:hover .pin-rm, .pin-rm:focus-visible { opacity: 1; }
.pin-val { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pin-viz svg { width: 100%; height: auto; display: block; }
.pin-bars { display: grid; gap: 6px; margin-top: 4px; }
.pin-bar { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12.5px; }
.pin-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-bar-t { height: 8px; background: var(--panel-3); border-radius: 999px; overflow: hidden; }
.pin-bar-t i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.pin-bar-v { font-variant-numeric: tabular-nums; font-weight: 650; }
.pin-go { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-d); font-weight: 650; font-size: 13px; }
@media (max-width: 720px) {
  .pin-grid { grid-template-columns: minmax(0, 1fr); }
  .pin-head .pin-rm { opacity: 1; }
}

/* ------------------------------------------------------------ list toolbar (list.js drawToolbar)
   Left zone .tb-main = search + filters (wraps inside itself), right zone .tb-tools = favourites, view switch, columns, analyse, export, import: the tools never
   split across rows. "New" is not here: list.js moves it into the page header (page-actions), the same place on every screen. A list with no page header
   of its own (in a card, a tab, a drawer) keeps New as the last tool. */
.toolbar { gap: 8px 12px; }
.toolbar > .tb-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 380px; min-width: 0; }
.toolbar > .tb-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-inline-start: auto; flex: 0 0 auto; }
.tb-main > .search-box { flex: 1 1 240px; max-width: 360px; }
.tb-main .chip-select { flex: 0 1 auto; min-width: 130px; max-width: 210px; text-overflow: ellipsis; }
.filters-btn .f-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-solid); color: var(--accent-on); font-size: 11.5px; font-weight: 700; }
.filters-btn .f-count[hidden] { display: none; }
[data-list-create] { white-space: nowrap; }
.toolbar > .tb-main:empty { display: none; }

/* Arabic date boxes: the written date (or يوم/شهر/سنة) over the browser's own date input, which sits invisible on top and opens the picker */
.date-box { position: relative; display: inline-flex; align-items: center; width: 140px; height: 38px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.date-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.date-box > .date-fmt { display: block; padding: 0 10px; text-align: start; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); pointer-events: none; }
.date-box > .date-fmt.empty { color: var(--muted); }   /* "empty" here is the unset date, not the empty-state block of admin.css (display, padding and centring reset above) */
.date-box > .date-in { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.date-box:focus-within > .date-in { opacity: 1; background: var(--panel); border-radius: var(--r-sm); padding-inline: 10px; }   /* while it has the focus the real input shows, so typing the date works */
.date-box:focus-within > .date-fmt { visibility: hidden; }

@media (max-width: 900px), (pointer: coarse) { .date-box { height: var(--tap, 44px); } }
@media (max-width: 720px) {
  /* phone: row 1 = the search, row 2 = Filters (with a count) + the tools as small icon buttons; the filters open as a row below; no row has a lone control */
  .toolbar > .tb-main { display: contents; }
  .toolbar > .tb-main > .search-box { order: 0; flex: 1 1 100%; max-width: none; }
  .toolbar > .tb-main > .filters-btn { order: 1; flex: 0 0 auto; }
  .toolbar > .tb-tools { order: 2; flex: 1 1 0; min-width: 0; gap: 6px; }
  .toolbar > .tb-main > .tb-filters { order: 3; }
  .tb-main .chip-select { flex: 1 1 calc(50% - 8px); max-width: none; min-width: 0; }
  .tb-main .date-pair { flex: 1 1 100%; }
  .tb-main .date-pair > .date-in, .tb-main .date-pair > .date-box { flex: 1 1 0; min-width: 0; width: auto; }
  .toolbar > .tb-tools { flex-wrap: nowrap; }   /* Filters + favourites + "more" (+ the view switch) are one row at 375 px */
  .tb-tools .btn { min-width: 40px; padding-inline: 10px; }
  .more-btn .ico svg { transform: rotate(90deg); }   /* the dots lie down: ⋯ */
  /* the "more" sheet: each tool is a full-width row with its label back */
  .more-menu > .btn, .more-menu > .fav-wrap { width: 100%; }
  .more-menu .fav-wrap { display: flex; }
  .more-menu .btn { justify-content: flex-start; border: 0; background: transparent; min-height: var(--tap, 44px); }
  .more-menu .hide-sm-label span:not(.ico) { display: inline; }
  .more-menu .import-icon-btn::after { content: attr(title); }
  .tb-tools .hide-sm-label > .ico:last-child:not(:first-child) { display: none; }   /* the little arrow of the menu buttons: the icon is enough */
  .tb-tools .btn-primary { padding-inline: 14px; }
  .tb-tools .segmented .seg { min-width: 40px; padding: 0 8px; }
  .tb-tools .segmented { flex: none; }   /* a view switch never shrinks to nothing when the row is full */
  /* the page header carries New: the title and New share the first row, a long label is cut instead of pushing New below */
  .page-head > .grow { flex: 1 1 120px; min-width: 0; }
  .page-head > .page-actions { margin-inline-start: auto; }
  .page-actions > [data-list-create] { max-width: 56vw; }
  .page-actions > [data-list-create] > span:not(.ico) { overflow: hidden; text-overflow: ellipsis; }
}