/*
 * Client Portal reskin (2026-09-27, revised same day for dark/light parity
 * with the admin panel -- owner: "amr main admin er moto kore smart ui").
 * The sidebar/topbar/dark-mode shell itself is now built with Tailwind
 * directly in layouts/master.blade.php (same system as the admin). This
 * file only restyles the *inner* pages, which are still plain Bootstrap 5
 * markup (.card/.btn/.table/.badge/.form-control, ~18 view files) so they
 * read as the same product in both light and dark mode without a
 * per-page rewrite.
 *
 * 2026-10-04: accent recolored from indigo (#6366f1) to mamonaf-it's own
 * violet (#6d28d9/#8b5cf6) to match that panel's look (owner: "client are
 * M.A. Monaf Smart Panel er moto hove") -- see layouts/master.blade.php's
 * own matching header comment and project_billing_mamonaf_hosting_bridge
 * memory. Same shapes/sizes as before, only the hue changed.
 */

/* 2026-10-05: single shared panel wrapping the missing-profile alert + a page's own content (see
   master.blade.php's "ei area ta ektao box er modde ni asho" comment) -- one visual box instead of two
   separate floating ones. A page's own `.card.portal-card` wrapper is neutralized when nested inside it
   so it doesn't double-frame (border/shadow/background all stripped, `.card-body`'s own padding too). */
.pk-surface { background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.dark .pk-surface { background: rgba(15,23,42,.55); border-color: rgba(148,163,184,.16); backdrop-filter: blur(12px); }
.pk-surface .card.portal-card, .pk-surface main .card {
    border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important;
}
.pk-surface .card.portal-card .card-body { padding: 0; }

.card.portal-card, main .card {
    border: 1px solid #e2e8f0 !important; border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; background: #fff !important; color: #334155;
}
.dark .card.portal-card, .dark main .card { background: rgba(15,23,42,.55) !important; border-color: rgba(148,163,184,.16) !important; color: #cbd5e1; backdrop-filter: blur(12px); }
/* 2026-10-06: `.card` is a Bootstrap flex column (`display:flex;flex-direction:column`) -- a plain
   `<span class="badge">` placed as its *direct* child (a common "Status" box pattern across this portal)
   gets stretched to the card's full width by the default `align-items:stretch`, instead of staying sized
   to its own text (owner screenshot: a full-width dark bar instead of a small pill, on the invoice show
   page). Global fix so every current and future direct-child badge in a `.card.portal-card` is unaffected,
   instead of each page having to remember its own `align-self` override. */
.card.portal-card > .badge, main .card > .badge { align-self: flex-start; }
.card .card-body { padding: 20px; }
.dark .card h1, .dark .card h2, .dark .card h3, .dark .card h4, .dark .card h5, .dark .card h6 { color: #fff; }
/* Bootstrap's .form-text is a SEPARATE class from .text-muted (its own
   `color: var(--bs-secondary-color)`, not inherited from .text-muted) --
   overriding only .text-muted left every field hint/helper line on this
   dark theme at Bootstrap's light-tuned default colour, near-invisible
   against this card's dark background (found 2026-10-08, client profile page). */
.dark .card .text-muted, .dark .card .form-text { color: #94a3b8 !important; }

.btn-primary { background: linear-gradient(135deg, #6d28d9, #8b5cf6) !important; border-color: transparent !important; font-weight: 600; border-radius: 10px !important; }
.btn-primary:hover { filter: brightness(.94); }
.btn-outline-primary { color: #6d28d9 !important; border-color: #6d28d9 !important; border-radius: 10px !important; font-weight: 600; }
.btn-outline-primary:hover { background: #6d28d9 !important; color: #fff !important; }
.btn-outline-secondary, .btn-outline-danger { border-radius: 10px !important; }
.btn { border-radius: 10px; font-weight: 600; }

.table { font-size: 13.5px; }
/* 2026-10-05: Bootstrap 5's own table cells paint `background-color: var(--bs-table-bg)` per cell
   (its redesigned table CSS), and `--bs-table-bg` resolves to Bootstrap's own `--bs-body-bg` (#fff) at
   `:root` -- Bootstrap has no idea this project's `.dark` class exists, so every table row/cell kept a
   solid white background even inside a translucent dark `.card.portal-card`, most visible on an empty
   table's own "No X yet." row (owner screenshot: a bright white bar in an otherwise dark page). Resetting
   `--bs-table-bg` to transparent here lets the card's own dark background show through, same as it
   already did for `.table-hover`'s hover state below. */
/* 2026-10-06: the line above only ever set the `color` *property* on `.table` itself -- but Bootstrap
   5.3's own table CSS paints each cell's text with `color: var(--bs-table-color-state, var(--bs-table-
   color-type, var(--bs-table-color)))` directly on the `td`/`th` selector, which wins over an ancestor's
   `color` regardless of our override (confirmed via computed style: cells stayed Bootstrap's default
   #212529 near-black even with this rule active, invisible on a dark card -- owner screenshot, invoice
   show page). Must override the CSS *variable* `--bs-table-color` itself, not just `color`, for every
   table cell site-wide to actually pick up the dark-mode text color. */
.dark .table { color: #cbd5e1; --bs-table-color: #cbd5e1; --bs-table-bg: transparent; --bs-table-border-color: rgba(148,163,184,.16); }
.table thead th { text-transform: uppercase; font-size: 10.5px; letter-spacing: .05em; color: #94a3b8; font-weight: 800; border-bottom-width: 1px; background: #f8fafc; }
.dark .table thead th { background: rgba(30,41,59,.6); color: #94a3b8; }
.table td, .table th { vertical-align: middle; padding: 11px 12px; }
.table-hover tbody tr:hover { background: #f8fafc; }
.dark .table-hover tbody tr:hover { background: rgba(148,163,184,.06); }
.dark .table a { color: #a5b4fc; }

.badge { font-weight: 700; font-size: 11px; padding: 5px 10px; border-radius: 999px; }
.badge.bg-success { background: #dcfce7 !important; color: #15803d !important; }
.badge.bg-warning { background: #fef3c7 !important; color: #b45309 !important; }
.badge.bg-danger  { background: #fee2e2 !important; color: #b91c1c !important; }
.badge.bg-secondary { background: #f1f5f9 !important; color: #475569 !important; }
.badge.bg-info { background: #e0f2fe !important; color: #0369a1 !important; }
.badge.bg-primary { background: #ede9fe !important; color: #5b21b6 !important; }
.dark .badge.bg-success { background: rgba(16,185,129,.15) !important; color: #34d399 !important; }
.dark .badge.bg-warning { background: rgba(245,158,11,.15) !important; color: #fbbf24 !important; }
.dark .badge.bg-danger { background: rgba(244,63,94,.15) !important; color: #fb7185 !important; }
.dark .badge.bg-secondary { background: rgba(148,163,184,.15) !important; color: #cbd5e1 !important; }
.dark .badge.bg-info { background: rgba(14,165,233,.15) !important; color: #7dd3fc !important; }
.dark .badge.bg-primary { background: rgba(139,92,246,.18) !important; color: #c4b5fd !important; }

.form-control, .form-select { border-color: #e2e8f0; border-radius: 10px; font-size: 13.8px; }
.form-control:focus, .form-select:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.15); }
.form-label { font-size: 13px; font-weight: 600; color: #334155; }
.dark .form-control, .dark .form-select { background: rgba(15,23,42,.6); border-color: rgba(148,163,184,.2); color: #e2e8f0; }
.dark .form-control:focus, .dark .form-select:focus { background: rgba(15,23,42,.8); }
.dark .form-control::placeholder { color: #64748b; }
.dark .form-label { color: #cbd5e1; }
.dark .form-check-label { color: #cbd5e1; }

.dark hr, .dark .border-bottom { border-color: rgba(148,163,184,.16) !important; }
/* 2026-10-04: `.dark p, .dark span:...` (plain tag selectors) used to sit directly in this rule --
   specificity (0,1,1), HIGHER than a single-class rule like `.fin-kpi-label` (0,1,0) -- so it was
   silently winning over any `<p>`/`<span>`-based component class defined elsewhere (dashboard's own
   `.fin-kpi-label`/`.fin-kpi-hint`/`.fin-empty` in backEnd/reports/_finance_styles.blade.php, all `<p>`
   tags with no `.dark` override of their own), forcing them all to `inherit` the surrounding
   `.glass-panel`'s single text color instead of their own distinct one -- this is the real cause behind
   owner's "onek text color milche nah, dekha jacche na" report, not a missing color per se. `:where()`
   contributes zero specificity, so wrapping the tag selectors in it drops this rule to the SAME
   specificity as a plain single-class rule; with equal specificity the later-loaded stylesheet wins,
   and `_finance_styles.blade.php`'s own `<style>` loads after this file (via `@yield('css')` in
   layouts/master.blade.php), so its own classes correctly win again now. `.text-dark` is left as a
   real tag-less class (not wrapped) since nobody applies that AND expects some other specific color --
   "inherit" is the deliberately correct behavior there. */
.dark .text-dark, .dark :where(p, span:not([class*="badge"])) { color: inherit; }

/* 2026-10-06: shared client-area design kit (stat tiles, tabs, toolbar, status pills, list rows, empty states).
   Used by My Billing, Tickets, Licenses, Downloads, Knowledgebase, Announcements, Network Issues, Profile. */
.cp-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
@media (min-width: 768px) { .cp-stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.cp-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.dark .cp-stat { background: rgba(15,23,42,.55); border-color: rgba(148,163,184,.16); }
.cp-stat-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(109,40,217,.1); color: #6d28d9; flex-shrink: 0; }
.dark .cp-stat-ico { background: rgba(139,92,246,.18); color: #c4b5fd; }
.cp-stat-v { font-weight: 800; font-size: 1.05rem; color: #0f172a; line-height: 1.2; }
.dark .cp-stat-v { color: #fff; }
.cp-stat-k { font-size: .78rem; color: #64748b; }
.dark .cp-stat-k { color: #a79cc4; }

.cp-tabs { display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cp-tabs::-webkit-scrollbar { display: none; }
.cp-tabs .nav-item { flex-shrink: 0; }
.cp-tabs .nav-link { border-radius: 12px; padding: 9px 16px; font-weight: 700; white-space: nowrap; color: #64748b; background: #fff; border: 1px solid #e2e8f0; }
.cp-tabs .nav-link.active { background: linear-gradient(135deg, #6d28d9, #8b5cf6); color: #fff; border-color: transparent; }
.dark .cp-tabs .nav-link { background: #190f33; border-color: rgba(139,92,246,.22); color: #c4b5fd; }
.dark .cp-tabs .nav-link.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
@media (max-width: 575.98px) { .cp-tabs { gap: 6px; } .cp-tabs .nav-link { padding: 7px 10px; font-size: .8rem; } }

.cp-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cp-toolbar .cp-search { flex: 1 1 240px; max-width: 360px; }

.cp-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: #f1f5f9; color: #475569; }
.cp-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; }
.cp-pill.is-ok { background: #dcfce7; color: #15803d; }
.cp-pill.is-warn { background: #fef3c7; color: #b45309; }
.cp-pill.is-bad { background: #fee2e2; color: #b91c1c; }
.cp-pill.is-info { background: #e0f2fe; color: #0369a1; }
.dark .cp-pill { background: rgba(148,163,184,.16); color: #cbd5e1; }
.dark .cp-pill.is-ok { background: rgba(34,197,94,.16); color: #86efac; }
.dark .cp-pill.is-warn { background: rgba(245,158,11,.18); color: #fcd34d; }
.dark .cp-pill.is-bad { background: rgba(244,63,94,.16); color: #fda4af; }
.dark .cp-pill.is-info { background: rgba(14,165,233,.16); color: #7dd3fc; }

.cp-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; margin-bottom: 10px; transition: box-shadow .15s; }
.cp-row:hover { box-shadow: 0 8px 22px rgba(15,23,42,.07); }
.dark .cp-row { background: rgba(15,23,42,.55); border-color: rgba(148,163,184,.16); }
.cp-row-main { flex: 1; min-width: 0; }
.cp-row-title { font-weight: 700; color: #0f172a; }
.dark .cp-row-title { color: #f5f3ff; }
.cp-row-meta { font-size: .8rem; color: #64748b; }
.dark .cp-row-meta { color: #a79cc4; }
.cp-row-side { text-align: right; flex-shrink: 0; }

.cp-empty { text-align: center; padding: 36px 16px; color: #64748b; }
.cp-empty-ico { width: 56px; height: 56px; border-radius: 18px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; background: rgba(109,40,217,.1); color: #6d28d9; font-size: 1.3rem; }
.dark .cp-empty-ico { background: rgba(139,92,246,.18); color: #c4b5fd; }
.dark .cp-empty { color: #a79cc4; }