/* ---------------------------------------------------------------------------------------
   Claude Design ERP page kit

   Shared look for the redesigned accounting pages (Journal Entry Manage, Open Balance
   Manage, ...). Every rule is scoped under .dc-page, so a page opts in by wrapping its
   content in <div class="dc-page"> and nothing here can reach the rest of the ERP theme.

   Loaded from Site.master AFTER bootstrap, style.css, component.css and
   bootstrap-multiselect.css, so equal-specificity rules resolve in favour of this file.
   --------------------------------------------------------------------------------------- */

.dc-page, .dc-page * { box-sizing: border-box; }
.dc-page { color: var(--g-text); }

/* --- title + page actions -------------------------------------------------- */
.dc-page .dc-actionbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.dc-page .dc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-page .dc-page-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--g-text-strong); }
/* the shared navigation control ships its own bootstrap column + float; neutralise
   both so it lines up with the buttons like the design shows */
.dc-page .dc-actionbar .col-sm-6 { width: auto; max-width: none; flex: none; padding: 0; }
.dc-page .dc-actionbar .float-right, .dc-page .dc-actionbar .float-left { float: none !important; }
/* the div is runat="server", so match on the suffix of the generated id */
.dc-page .dc-actionbar [id$='navigationControl'] { display: flex; align-items: center; gap: 6px; margin: 0 !important; font-size: 13px; color: var(--g-text-muted); white-space: nowrap; }
.dc-page .dc-actionbar [id$='navigationControl'] a { border: 1px solid var(--g-border); background: var(--g-surface); color: var(--g-text-strong); padding: 5px 9px; border-radius: 3px; cursor: pointer; font-size: 12px; }
.dc-page .dc-actionbar [id$='navigationControl'] a:hover { border-color: var(--g-primary); color: var(--g-primary); }
.dc-page .dc-actionbar [id$='navigationControl'] span { color: var(--g-border); }

/* --- buttons --------------------------------------------------------------- */
.dc-page .dc-btn { display: inline-flex; align-items: center; gap: 6px; border: none; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 3px; cursor: pointer; line-height: 1.2; text-decoration: none; }
.dc-page .dc-btn:hover { text-decoration: none; filter: brightness(0.94); }
.dc-page .dc-btn i { font-size: 14px; }
.dc-page .dc-btn-primary { background: var(--g-primary); color: #fff; }
.dc-page .dc-btn-primary:hover, .dc-page .dc-btn-primary:focus { color: #fff; }
.dc-page .dc-btn-submit { background: #2ed8b6; color: #fff; }
.dc-page .dc-btn-submit:hover, .dc-page .dc-btn-submit:focus { color: #fff; }
.dc-page .dc-btn-info { background: #4099ff; color: #fff; }
.dc-page .dc-btn-info:hover, .dc-page .dc-btn-info:focus { color: #fff; }
.dc-page .dc-btn-danger { background: var(--g-danger); color: #fff; }
.dc-page .dc-btn-danger:hover, .dc-page .dc-btn-danger:focus { color: #fff; }
/* Suspend: orange — a stop that is meant to be reversible, so it reads apart from the destructive red of
   Repair and from the plain light buttons it used to share a look with. */
.dc-page .dc-btn-warning { background: #ef8a17; color: #fff; }
.dc-page .dc-btn-warning:hover, .dc-page .dc-btn-warning:focus { color: #fff; }
.dc-page .dc-btn-add { background: #2ed8b6; color: #fff; font-size: 12px; padding: 6px 12px; gap: 5px; }
.dc-page .dc-btn-add:hover, .dc-page .dc-btn-add:focus { color: #fff; }
.dc-page .dc-btn-add i { font-size: 13px; }
.dc-page .dc-btn-light { border: 1px solid var(--g-border); background: var(--g-surface); color: var(--g-text-muted); font-size: 12px; font-weight: 400; padding: 6px 11px; gap: 5px; }
.dc-page .dc-btn-light:hover, .dc-page .dc-btn-light:focus { color: var(--g-primary); border-color: var(--g-primary); }
.dc-page .dc-btn-light i { font-size: 13px; }
/* the Status button sits with Save/Back, so it takes their size rather than the compact one */
.dc-page .dc-btn-light-lg { font-size: 13px; font-weight: 600; padding: 8px 14px; gap: 6px; }
.dc-page .dc-btn-light-lg i { font-size: 14px; }

/* --- workflow status chip ---------------------------------------------------- */
.dc-page .dc-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 11px; font-size: 11px; font-weight: 700; }
.dc-page .dc-chip:empty { display: none; }
.dc-page .dc-chip-ok { background: var(--g-badge-success-bg); color: var(--g-badge-success-fg); }
.dc-page .dc-chip-pending { background: var(--g-badge-info-bg); color: var(--g-badge-info-fg); }
.dc-page .dc-chip-draft { background: var(--g-badge-warning-bg); color: var(--g-badge-warning-fg); }
.dc-page .dc-chip-bad { background: var(--g-danger-soft); color: var(--g-danger); }
.dc-page .dc-chip-neutral { background: var(--g-surface-alt); color: var(--g-text-muted); }

/* --- workflow status modal ---------------------------------------------------- */
.dc-page .dc-modal { display: none; position: fixed; inset: 0; z-index: 1050; align-items: center; justify-content: center; padding: 32px; }
.dc-page .dc-modal.is-open { display: flex; }
.dc-page .dc-modal-backdrop { position: absolute; inset: 0; background: rgba(64,78,103,0.45); }
.dc-page .dc-modal-dialog { position: relative; width: 100%; max-width: 560px; max-height: 100%; overflow-y: auto; background: var(--g-surface); border-radius: 8px; box-shadow: 0 24px 60px rgba(35,43,58,0.35); }
.dc-page .dc-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--g-border-soft); }
.dc-page .dc-modal-head-title { display: flex; align-items: center; gap: 9px; }
.dc-page .dc-modal-head-title i { color: var(--g-primary); font-size: 16px; }
.dc-page .dc-modal-head-title h5 { margin: 0; font-size: 15px; font-weight: 700; color: var(--g-text-strong); }
.dc-page .dc-modal-x { border: none; background: transparent; color: var(--g-text-subtle); line-height: 1; cursor: pointer; padding: 2px 6px; }
.dc-page .dc-modal-x:hover { color: var(--g-text-strong); }
.dc-page .dc-modal-x i { font-size: 17px; }
.dc-page .dc-modal-body { padding: 18px 20px 22px; }
.dc-page .dc-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
@media (max-width: 560px) { .dc-page .dc-modal-grid { grid-template-columns: 1fr; } }
.dc-page .dc-modal-grid label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 600; color: var(--g-primary); letter-spacing: 0.2px; }
.dc-page .dc-modal-value { font-size: 13px; color: var(--g-text-strong); padding: 8px 11px; background: var(--g-surface-alt); border: 1px solid var(--g-border-soft); border-radius: 4px; }
.dc-page .dc-modal-wide { grid-column: 1 / -1; }
.dc-page .dc-modal-notes { min-height: 70px; white-space: pre-wrap; color: var(--g-text-muted); }
.dc-page .dc-modal-foot { display: flex; justify-content: flex-end; gap: 7px; padding: 12px 18px; border-top: 1px solid var(--g-border-soft); background: var(--g-surface-row-alt); border-radius: 0 0 8px 8px; }
.dc-page .dc-modal-foot button { border: 1px solid var(--g-border); background: var(--g-surface); color: var(--g-text-muted); font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 3px; cursor: pointer; font-family: inherit; }
.dc-page .dc-modal-foot button:hover { border-color: var(--g-primary); color: var(--g-primary); }

/* --- cards ----------------------------------------------------------------- */
/* no overflow:hidden here — Site.master turns every select into a multiselect dropdown
   and binds the datetimepicker to .input-group.date, and clipping swallows both */
.dc-page .dc-card { background: var(--g-surface); border: none; border-radius: 6px; box-shadow: 0 1px 12px var(--g-shadow); margin-bottom: 18px; }
.dc-page .dc-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--g-border-soft); }
.dc-page .dc-card-head h5 { margin: 0; font-size: 15px; font-weight: 700; color: var(--g-text-strong); }
.dc-page .dc-card-head-rtl { flex-direction: row-reverse; }
.dc-page .dc-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* a small piece of metadata sitting beside a card title (invoice serial, and similar) */
.dc-page .dc-head-meta { font-size: 12px; color: var(--g-text-subtle); }
.dc-page .dc-head-meta span { color: var(--g-primary); font-weight: 600; }
.dc-page .dc-head-actions input[type="file"] { font-size: 12px; color: var(--g-text-muted); max-width: 220px; }
.dc-page .dc-card-body { padding: 18px; }
/* a card body whose content is a grid: it runs edge to edge, so the padding comes off */
.dc-page .dc-card-body-flush { padding: 0; }

/* --- form fields ------------------------------------------------------------ */
.dc-page .dc-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dc-page .dc-fields-2 { grid-template-columns: repeat(2, 1fr); }
.dc-page .dc-fields-4 { grid-template-columns: repeat(4, 1fr); }
/* a field that needs the width of several columns (grouped sub-sections) */
.dc-page .dc-span-2 { grid-column: span 2; }
.dc-page .dc-span-all { grid-column: 1 / -1; }
@media (max-width: 1200px) { .dc-page .dc-fields-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
    .dc-page .dc-fields, .dc-page .dc-fields-2, .dc-page .dc-fields-4 { grid-template-columns: 1fr; }
    .dc-page .dc-span-2 { grid-column: auto; }
}
.dc-page .dc-field label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--g-primary); }
.dc-page .dc-field .form-control,
.dc-page .dc-field input[type="text"],
.dc-page .dc-field select { width: 100%; height: auto; border: 1px solid var(--g-border); border-radius: 3px; padding: 8px 10px; font-size: 13px; color: var(--g-text); font-family: inherit; background-color: var(--g-surface); }
.dc-page .dc-field select { cursor: pointer; }
.dc-page .dc-field .form-control:focus, .dc-page .dc-field select:focus { outline: none; border-color: var(--g-primary); box-shadow: none; }
.dc-page .dc-field .form-control[disabled] { background: var(--g-surface-alt); color: var(--g-text-subtle); }
/* Two arrows would otherwise show: the plugin's bootstrap 3 <b class="caret"> and
   bootstrap 4's own .dropdown-toggle::after. Keep the trailing ::after, drop the <b>. */
.dc-page button.multiselect > .caret { display: none; }
.dc-page button.multiselect.dropdown-toggle::after { flex: 0 0 auto; margin: 0; border-top-color: var(--g-text-subtle); }

/* the real select is hidden and replaced by a multiselect button, so the design's field
   look has to land on the button rather than on the select */
.dc-page .dc-field .btn-group { display: block; width: 100%; }
.dc-page .dc-field button.multiselect { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: auto; text-align: left; border: 1px solid var(--g-border); border-radius: 3px; background: var(--g-surface); color: var(--g-text); font-size: 13px; font-weight: 400; padding: 8px 10px; box-shadow: none; }
.dc-page .dc-field button.multiselect:hover, .dc-page .dc-field button.multiselect:focus, .dc-page .dc-field .btn-group.show button.multiselect { border-color: var(--g-primary); color: var(--g-text); background: var(--g-surface); }
.dc-page .dc-field button.multiselect .multiselect-selected-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* bootstrap-multiselect is a bootstrap 3 plugin running on a bootstrap 4 theme: it emits
   <li><a><label>, which BS4 leaves unstyled because it expects .dropdown-item. The option
   rows, hover/active states and filter box are all rebuilt here. Applies to the grid's
   Project/Department dropdowns too, not just Currency. */
.dc-page .multiselect-container { min-width: 100%; margin: 3px 0 0; padding: 4px; border: 1px solid var(--g-border-soft); border-radius: 4px; box-shadow: 0 6px 18px var(--g-shadow-strong); background: var(--g-surface); font-size: 13px; }
.dc-page .multiselect-container > li > a { display: block; padding: 0; border-radius: 3px; color: var(--g-text); text-decoration: none; }
.dc-page .multiselect-container > li > a:hover, .dc-page .multiselect-container > li > a:focus { background: var(--g-primary-soft); color: var(--g-primary); text-decoration: none; }
/* The selected row is a solid teal fill with white text. */
.dc-page .multiselect-container > li.active > a { background: var(--g-primary); color: #fff; font-weight: 600; }
.dc-page .multiselect-container > li.active > a:hover,
.dc-page .multiselect-container > li.active > a:focus { background: var(--g-primary-hover); color: #fff; }
.dc-page .multiselect-container > li > a > label { display: flex; color: inherit; align-items: center; gap: 8px; margin: 0; padding: 7px 10px; height: auto; font-size: 13px; font-weight: 400; line-height: 1.35; cursor: pointer; }
/* The label carries the theme's .radio styling and its own weight, so both are pinned here:
   inheriting alone left the selected row teal - the same colour as the highlighted row. */
.dc-page .multiselect-container > li.active > a > label,
.dc-page .multiselect-container > li.active > a:hover > label,
.dc-page .multiselect-container > li.active > a:focus > label { color: #fff; font-weight: 600; }
.dc-page .multiselect-container > li > a > label > input[type="radio"],
.dc-page .multiselect-container > li > a > label > input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.dc-page .multiselect-container > li.multiselect-group > label { margin: 0; padding: 7px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--g-text-subtle); }
.dc-page .multiselect-container > li.divider { height: 1px; margin: 4px 0; background: var(--g-border-soft); overflow: hidden; }
/* filter row */
.dc-page .multiselect-container > li.filter { padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--g-border-soft); }
.dc-page .multiselect-container > li.filter .input-group { display: flex; margin: 0; }
.dc-page .multiselect-container > li.filter .input-group-addon { display: flex; align-items: center; flex: 0 0 auto; padding: 0 9px; border: 1px solid var(--g-border); border-inline-end: none; border-radius: 3px 0 0 3px; background: var(--g-surface-alt); color: var(--g-text-subtle); font-size: 12px; }
.dc-page .multiselect-container > li.filter input.multiselect-search { flex: 1 1 auto; width: auto; min-width: 0; height: auto; border: 1px solid var(--g-border); border-radius: 0 3px 3px 0; padding: 6px 9px; font-size: 13px; color: var(--g-text); }
.dc-page .multiselect-container > li.filter input.multiselect-search:focus { border-color: var(--g-primary); box-shadow: none; outline: none; }
.dc-page .multiselect-container > li.filter .input-group-btn { display: flex; flex: 0 0 auto; }
.dc-page .multiselect-container > li.filter .multiselect-clear-filter { border: 1px solid var(--g-border); border-inline-start: none; border-radius: 0 3px 3px 0; background: var(--g-surface-alt); color: var(--g-text-subtle); padding: 0 9px; }
.dc-page .dc-value { font-size: 13px; color: var(--g-text); padding: 8px 0; }
/* read-only fields are filled from code-behind and several of them feed printed reports
   verbatim, so an empty one is marked here in CSS rather than by changing the label text */
.dc-page .dc-value span:empty::after { content: "\2014"; color: var(--g-text-subtle); }
/* date field: the teal calendar affordance sits inside the input like the design */
.dc-page .dc-date { position: relative; display: block; }
.dc-page .dc-date .form-control { padding-inline-end: 40px; }
/* The addon is the datetimepicker's toggle, so it has to stay on top and clickable.
   bootstrap gives .input-group > .form-control z-index 3 on focus, which would otherwise
   paint the focused input over this icon and swallow the click. */
.dc-page .dc-date .input-group-addon { position: absolute; inset-inline-end: 0; top: 0; bottom: 0; z-index: 4; width: 34px; display: flex; align-items: center; justify-content: center; background: var(--g-primary); color: #fff; border: none; border-radius: 0 3px 3px 0; margin: 0; cursor: pointer; }
.dc-page .dc-date .input-group-addon:hover { background: var(--g-primary-hover); }
.dc-page .dc-date .input-group-addon i { font-size: 14px; }
.dc-page .inlineError, .dc-page .text-danger { display: block; margin-top: 4px; font-size: 12px; color: var(--g-danger); }

/* --- details header: totals + balance badge ---------------------------------- */
.dc-page .dc-details-title { display: flex; align-items: center; gap: 14px; }
.dc-page .dc-totals { display: flex; align-items: center; gap: 20px; font-size: 13px; flex-wrap: wrap; }
.dc-page .dc-total { display: flex; align-items: center; gap: 8px; }
.dc-page .dc-total-label { color: var(--g-text-muted); }
.dc-page .dc-total-value { font-weight: 700; color: var(--g-primary); font-variant-numeric: tabular-nums; }
.dc-page .dc-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px; border-radius: 11px; font-size: 12px; font-weight: 600; }
.dc-page .dc-badge i { font-size: 12px; }
.dc-page .dc-badge-ok { background: var(--g-badge-success-bg); color: var(--g-badge-success-fg); }
.dc-page .dc-badge-off { background: var(--g-danger-soft); color: var(--g-danger); }

/* --- transactions grid -------------------------------------------------------
   The skin puts `table table-striped table-bordered nowrap dataTable mGrid` on the
   GridView, so the borders and stripes are reset here instead of swapping classes. */
/* min-height keeps room for the multiselect dropdowns the edit row opens, the way the
   original table-responsive wrapper did */
.dc-page .dc-grid-wrap { overflow: auto; min-height: 250px; border-radius: 0 0 6px 6px; }
/* the theme swaps .table-responsive for .temp while a datepicker inside the grid is open,
   so drop the clipping then or the calendar is cut off by the scroll container */
.dc-page .dc-grid-wrap.temp { overflow: visible; }
.dc-page .mGrid { width: 100%; min-width: 900px; margin: 0; border-collapse: collapse; font-size: 13px; border: none; }
.dc-page .mGrid th, .dc-page .mGrid td { border: none; vertical-align: middle; }
.dc-page .mGrid thead th { background: var(--g-surface-alt); color: var(--g-text-strong); font-weight: 700; padding: 11px 14px; border-bottom: 2px solid var(--g-border-soft); white-space: nowrap; text-align: left; }
.dc-page .mGrid tbody td { padding: 10px 14px; border-bottom: 1px solid var(--g-border-faint); }
.dc-page .mGrid tbody tr { background: var(--g-surface); }
.dc-page .mGrid tbody tr:nth-of-type(even) { background: var(--g-surface-row-alt); }
.dc-page .mGrid tbody tr:hover { background: var(--g-primary-soft); }
/* Column roles are opted into per column (ItemStyle-CssClass / HeaderStyle-CssClass /
   FooterStyle-CssClass) rather than by position: columns get hidden at runtime and differ
   from page to page, so nth-child cannot identify them reliably. */
.dc-page .mGrid .dc-num { text-align: right; font-variant-numeric: tabular-nums; }
.dc-page .mGrid .dc-strong { font-weight: 600; }
.dc-page .mGrid .dc-muted { color: var(--g-text-subtle); }
/* Columns can be hidden at runtime (e.g. the cheque columns on a non-cheque voucher), and under
   the default auto layout the leftover table width then stretches whichever fixed-width column
   is left. Wrapping a grid in .dc-grid-fixed pins every declared HeaderStyle-Width and hands the
   slack to the one column left width-less - a trailing spacer column marked .dc-col-fill. */
.dc-page .dc-grid-fixed .mGrid { table-layout: fixed; min-width: 990px; }
.dc-page .mGrid .dc-col-fill { width: auto; }
.dc-page .mGrid tfoot td { background: var(--g-surface-alt); color: var(--g-text-strong); font-weight: 700; padding: 10px 14px; border-top: 1px solid var(--g-border-soft); }
.dc-page .dc-row-actions { display: flex; gap: 6px; }
.dc-page .dc-mini { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--g-border); background: var(--g-surface); color: var(--g-text-strong); padding: 5px 8px; border-radius: 3px; cursor: pointer; line-height: 1; }
.dc-page .dc-mini:hover { border-color: var(--g-primary); color: var(--g-primary); }
.dc-page .dc-mini i { font-size: 12px; }
.dc-page .dc-mini-danger { border-color: var(--g-danger-border); color: var(--g-danger); }
.dc-page .dc-mini-danger:hover { border-color: var(--g-danger); color: var(--g-danger); }
/* inline edit row: keep the theme's controls but size them to the design */
.dc-page .mGrid .form-control { height: auto; border: 1px solid var(--g-border); border-radius: 3px; padding: 6px 9px; font-size: 13px; }
.dc-page .mGrid .form-control:focus { border-color: var(--g-primary); box-shadow: none; }
.dc-page .mGrid input.btn { border: 1px solid var(--g-border); background: var(--g-surface); color: var(--g-text-strong); font-size: 12px; padding: 5px 10px; border-radius: 3px; margin-inline-end: 4px; }
.dc-page .mGrid input.btn:hover { border-color: var(--g-primary); color: var(--g-primary); }
.dc-page .mGrid button.multiselect { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: auto; text-align: left; border: 1px solid var(--g-border); border-radius: 3px; background: var(--g-surface); color: var(--g-text); font-size: 13px; font-weight: 400; padding: 6px 9px; box-shadow: none; }

/* --- inline warning banner inside a card ------------------------------------- */
.dc-page .dc-warning { display: flex; align-items: center; gap: 8px; margin: 0 18px 14px; padding: 9px 12px; border: 1px solid var(--g-warning-border); border-radius: 4px; background: var(--g-warning-soft); color: var(--g-badge-warning-fg); font-size: 13px; }
.dc-page .dc-warning i { flex: 0 0 auto; font-size: 14px; }

/* --- checkbox sitting in a field slot ---------------------------------------- */
.dc-page .dc-check { display: flex; align-items: center; min-height: 38px; }
.dc-page .dc-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; cursor: pointer; }
/* a repair-note block appended under the main field grid */
.dc-page .dc-fields-repair { margin-top: 18px; }

/* --- dialog bits: the packing list dialog carries .dc-page on its modal-content, so the kit
       styles its fields and grid; these cover what a dialog needs on top of a page ---------- */
.dc-page .dc-entry { padding: 12px; margin-bottom: 12px; border: 1px solid var(--g-border-soft); border-radius: 6px; background: var(--g-surface-row-alt); }
/* the Add button sits in a field slot, aligned with the inputs beside it rather than the labels */
.dc-page .dc-field-action { display: flex; align-items: flex-end; }
/* A grid inside a dialog drops the page grid's min-height and does not cap its own height:
   the dialog body below is what scrolls, so the list adds one scrollbar rather than nesting a
   second one inside the first. Horizontal scrolling for the wide column set stays. */
.dc-page .dc-grid-wrap-capped { min-height: 0; max-height: none; }

/* The entry form is deliberately compact - small labels, tight rows - so the dialog's height
   goes to the list below rather than to the form above it. */
.dc-page .dc-entry .dc-fields { gap: 10px 12px; }
.dc-page .dc-entry .dc-field label { margin-bottom: 3px; font-size: 11px; }
.dc-page .dc-entry .dc-field .form-control { padding: 5px 8px; }
.dc-page .dc-entry .dc-value { padding: 5px 0; font-size: 12px; }

/* Keep the dialog shell short: cap it against the viewport and scroll the body, so a long
   packing list never pushes the header off the top or the print buttons off the bottom.
   The UpdatePanel renders an unclassed div between modal-content and the body, so the chain
   has to pass the flex sizing through it - hence the :not(.modal-header) child rule. */
.dc-page.modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 100px); }
.dc-page.modal-content > div:not(.modal-header) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dc-page.modal-content .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dc-page.modal-content .modal-header, .dc-page.modal-content .dc-modal-actions { flex: 0 0 auto; }
.dc-page .dc-modal-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--g-border-soft); background: var(--g-surface-row-alt); }

/* --- settings page: tab rail + setting rows ----------------------------------
   Used by Settings/Configurations. The design replaces the AjaxToolkit TabContainer
   with a vertical rail beside a column of grouped cards, so the tab chrome lives here
   rather than in the toolkit's own stylesheet. */

/* Backup sits with Edit/Save in the action bar and is the only amber action in the kit. */
.dc-page .dc-btn-warning { background: #f5a623; color: #fff; }
.dc-page .dc-btn-warning:hover, .dc-page .dc-btn-warning:focus { color: #fff; }

.dc-page .dc-split { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.dc-page .dc-split-side { flex: 1 1 200px; min-width: 0; max-width: 232px; }
.dc-page .dc-split-main { flex: 1 1 420px; min-width: 0; }
/* below the breakpoint the rail becomes a full-width strip above the cards */
@media (max-width: 800px) { .dc-page .dc-split-side { max-width: none; flex-basis: 100%; } }

.dc-page .dc-rail { background: var(--g-surface); border-radius: 6px; box-shadow: 0 1px 12px var(--g-shadow); overflow: hidden; }
.dc-page .dc-rail-item { display: flex; align-items: center; gap: 11px; padding: 13px 15px; cursor: pointer; border-bottom: 1px solid var(--g-border-faint); border-inline-start: 3px solid transparent; background: var(--g-surface); color: var(--g-text-muted); }
.dc-page .dc-rail-item:last-child { border-bottom: none; }
.dc-page .dc-rail-item:hover { background: var(--g-primary-soft); }
.dc-page .dc-rail-item.is-active { border-inline-start-color: var(--g-primary); background: var(--g-primary-soft); color: var(--g-primary-hover); }
.dc-page .dc-rail-item > i { width: 20px; flex: 0 0 20px; font-size: 15px; }
.dc-page .dc-rail-text { flex: 1; min-width: 0; }
.dc-page .dc-rail-label { display: block; font-size: 13px; font-weight: 600; }
.dc-page .dc-rail-hint { display: block; font-size: 11px; color: var(--g-text-subtle); }
.dc-page .dc-rail-count { flex: 0 0 auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 9px; background: var(--g-surface-alt); color: var(--g-text-subtle); }
.dc-page .dc-rail-item.is-active .dc-rail-count { background: var(--g-primary); color: #fff; }

.dc-page .dc-tabpanel { display: none; }
.dc-page .dc-tabpanel.is-active { display: block; }

/* the card head gains a leading icon and a subtitle beside the title on this page */
.dc-page .dc-card-head-ico { justify-content: flex-start; gap: 9px; }
.dc-page .dc-card-head-ico > i { color: var(--g-primary); font-size: 15px; flex: 0 0 auto; }
.dc-page .dc-head-sub { font-size: 11px; color: var(--g-text-subtle); }

/* --- one setting per row: label + description on the left, control on the right --- */
.dc-page .dc-set-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 6px 16px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--g-border-faint); }
.dc-page .dc-set-row:last-child { border-bottom: none; }
.dc-page .dc-set-label { display: block; font-size: 13px; font-weight: 600; color: var(--g-text-strong); margin: 0; }
.dc-page .dc-set-desc { display: block; font-size: 11px; color: var(--g-text-subtle); margin-top: 2px; }
.dc-page .dc-set-control { min-width: 0; }
/* read-only values sit on the same baseline as the label rather than in a padded field box */
.dc-page .dc-set-control .dc-value { padding: 0; font-size: 13px; color: var(--g-text-strong); overflow-wrap: anywhere; }
/* inputs, selects and the multiselect button all cap at the design's field width */
.dc-page .dc-set-control .form-control,
.dc-page .dc-set-control input[type="text"],
.dc-page .dc-set-control select,
.dc-page .dc-set-control .btn-group { width: 100%; max-width: 360px; height: auto; border-radius: 3px; font-size: 13px; color: var(--g-text); font-family: inherit; }
.dc-page .dc-set-control .form-control,
.dc-page .dc-set-control input[type="text"],
.dc-page .dc-set-control select { border: 1px solid var(--g-border); padding: 7px 10px; background-color: var(--g-surface); }
.dc-page .dc-set-control select { cursor: pointer; }
.dc-page .dc-set-control .form-control:focus,
.dc-page .dc-set-control select:focus { outline: none; border-color: var(--g-primary); box-shadow: none; }
/* the tax list is a real multi-select listbox, so it keeps its own height */

/* --- checkbox rendered as the design's pill switch ---------------------------
   asp:CheckBox emits a bare <input type="checkbox">, so the switch is drawn on the
   input itself and the posted value keeps working untouched. */
.dc-page .dc-switch input[type="checkbox"] { -webkit-appearance: none; appearance: none; position: relative; width: 42px; height: 22px; margin: 0; padding: 0; border: none; border-radius: 11px; background: var(--g-switch-off); cursor: pointer; vertical-align: middle; transition: background .15s; }
.dc-page .dc-switch input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--g-surface); transition: inset-inline-start .15s; }
.dc-page .dc-switch input[type="checkbox"]:checked { background: var(--g-primary); }
.dc-page .dc-switch input[type="checkbox"]:checked::after { inset-inline-start: 23px; }
.dc-page .dc-switch input[type="checkbox"]:focus { outline: none; box-shadow: 0 0 0 3px rgba(1,169,172,0.2); }

/* --- the selected tax percentages, one chip each ----------------------------- */
.dc-page .dc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-page .dc-tag { font-size: 11px; font-weight: 600; color: var(--g-primary-hover); background: var(--g-primary-soft); border-radius: 11px; padding: 3px 10px; }

/* --- company logo ------------------------------------------------------------
   The dark plate stands in for the printed document background, where the logo is
   actually used, so a white-on-transparent logo stays readable here. */
.dc-page .dc-logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dc-page .dc-logo-frame { background: #404E67; border-radius: 5px; padding: 9px 14px; display: inline-flex; }
.dc-page .dc-logo-frame img { width: 130px; max-width: 100%; height: auto; display: block; border: none; }
.dc-page .dc-logo input[type="file"] { font-size: 12px; color: var(--g-text-muted); max-width: 220px; }

/* --- composite fields: date picker and the accounts tree browse button --------
   Both render as .input-group, but the kit positions the datepicker's addon absolutely
   inside the field while the accounts picker wants it as a real adjoining button, so the
   two are told apart on .date rather than by control type. */
.dc-page .dc-set-control .dc-date { max-width: 360px; }
.dc-page .dc-set-control .input-group:not(.date) { display: flex; max-width: 360px; }
.dc-page .dc-set-control .input-group:not(.date) .form-control { flex: 1 1 auto; min-width: 0; max-width: none; border-inline-end: none; border-radius: 3px 0 0 3px; }
.dc-page .dc-set-control .input-group:not(.date) .input-group-addon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 38px; margin: 0; border: none; border-radius: 0 3px 3px 0; background: var(--g-primary); color: #fff; cursor: pointer; }
.dc-page .dc-set-control .input-group:not(.date) .input-group-addon:hover { background: var(--g-primary-hover); }
.dc-page .dc-set-control .input-group:not(.date) .input-group-addon i { font-size: 13px; }

/* Site.master runs bootstrap-multiselect over every select on the page, so the real
   select is hidden and the design's field look has to land on the generated button.
   The kit already does this for .dc-field; the settings rows need the same treatment. */
.dc-page .dc-set-control .btn-group { display: block; width: 100%; max-width: 360px; }
.dc-page .dc-set-control button.multiselect { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: auto; text-align: left; border: 1px solid var(--g-border); border-radius: 3px; background: var(--g-surface); color: var(--g-text); font-size: 13px; font-weight: 400; padding: 7px 10px; box-shadow: none; }
.dc-page .dc-set-control button.multiselect:hover,
.dc-page .dc-set-control button.multiselect:focus,
.dc-page .dc-set-control .btn-group.show button.multiselect { border-color: var(--g-primary); color: var(--g-text); background: var(--g-surface); }
.dc-page .dc-set-control button.multiselect .multiselect-selected-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- hint line under a field ------------------------------------------------- */
.dc-page .dc-hint { display: block; margin-top: 5px; font-size: 11px; color: var(--g-text-subtle); }
.dc-page .dc-field textarea.form-control { resize: vertical; }

/* --- rich text editor: toolbar, editable body, HTML source, sandboxed preview ---
   Used by Notification/NotificationTemplates. The toolbar buttons are .dc-mini; the
   source toggle carries .active while it is on. */
.dc-page .dc-editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--g-border); border-bottom: 0; border-radius: 3px 3px 0 0; background: var(--g-surface-alt); }
.dc-page .dc-editor-toolbar .dc-mini { min-width: 30px; min-height: 28px; font-size: 12px; font-weight: 700; font-family: inherit; }
.dc-page .dc-editor-toolbar .dc-mini.active { border-color: var(--g-primary); background: var(--g-primary); color: #fff; }
.dc-page .dc-editor-toolbar .dc-mini:disabled { opacity: .45; cursor: default; }
.dc-page .dc-editor-toolbar .dc-editor-sep { width: 1px; margin: 2px 4px; background: var(--g-border); }
.dc-page .dc-editor { min-height: 260px; max-height: 520px; overflow: auto; padding: 12px; border: 1px solid var(--g-border); border-radius: 0 0 3px 3px; background: var(--g-surface); font-size: 13px; color: var(--g-text); }
.dc-page .dc-editor:focus { outline: none; border-color: var(--g-primary); }
.dc-page .dc-editor-source { display: block; width: 100%; min-height: 260px; padding: 12px; border: 1px solid var(--g-border); border-radius: 0 0 3px 3px; font-family: Consolas, monospace; font-size: 12px; color: var(--g-text); }
.dc-page .dc-editor-source:focus { outline: none; border-color: var(--g-primary); }
.dc-page .dc-editor-preview { margin-top: 16px; }
.dc-page .dc-editor-preview iframe { display: block; width: 100%; min-height: 320px; margin-top: 6px; border: 1px solid var(--g-border); border-radius: 3px; background: var(--g-surface); }
.dc-page .dc-placeholders { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-page .dc-placeholders .dc-btn { font-family: Consolas, monospace; }

/* --- login page --------------------------------------------------------------
   Login.aspx has no master page, so it links this file directly and puts .dc-page
   on <body>. It also does not inherit BasePage, so InitializeCulture never runs and
   the page always renders in the default culture - which is why its copy is written
   into the markup rather than pulled from Labels.resx. */
.dc-page .dc-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--g-bg); }
.dc-page .dc-login-card { width: 100%; max-width: 880px; display: flex; flex-wrap: wrap; background: var(--g-surface); border-radius: 8px; box-shadow: 0 12px 44px var(--g-shadow-strong); overflow: hidden; }

/* the dark half: product name and what the system covers */
.dc-page .dc-login-aside { flex: 1 1 300px; min-width: 0; background: #404E67; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.dc-page .dc-login-aside img { width: 150px; max-width: 100%; height: auto; display: block; border: none; }
.dc-page .dc-login-aside h1 { margin: 0 0 10px; font-size: 21px; font-weight: 700; color: #fff; text-wrap: balance; }
.dc-page .dc-login-aside p { margin: 0; font-size: 14px; line-height: 1.6; color: #c3ccd9; text-wrap: pretty; }
.dc-page .dc-login-points { display: flex; flex-direction: column; gap: 11px; }
.dc-page .dc-login-point { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #dbe2ec; }
.dc-page .dc-login-point i { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 5px; background: rgba(1,169,172,0.22); color: #2ed8b6; display: flex; align-items: center; justify-content: center; font-size: 13px; }

/* the form half */
.dc-page .dc-login-main { flex: 1 1 340px; min-width: 0; padding: 44px 40px; }
.dc-page .dc-login-main h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--g-text-strong); }
.dc-page .dc-login-sub { margin: 0 0 26px; font-size: 13px; color: var(--g-text-subtle); }
.dc-page .dc-login-fields { display: flex; flex-direction: column; gap: 16px; }
.dc-page .dc-login-field > label { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; color: var(--g-primary); letter-spacing: 0.2px; }

/* text inputs carry no bootstrap class, so everything about them is set here */
.dc-page .dc-input-icon { position: relative; display: block; }
.dc-page .dc-input-icon > i { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); color: var(--g-text-faint); font-size: 14px; display: flex; align-items: center; pointer-events: none; }
.dc-page .dc-login-input { width: 100%; border: 1px solid var(--g-border); border-radius: 4px; padding-block: 10px; padding-inline-start: 34px; padding-inline-end: 12px; font-size: 13px; color: var(--g-text); font-family: inherit; background: var(--g-surface); }
.dc-page .dc-login-input:focus { outline: none; border-color: var(--g-primary); box-shadow: none; }
.dc-page .dc-login-input::placeholder { color: var(--g-text-faint); }
/* the password field leaves room for the reveal button */
.dc-page .dc-input-icon-both .dc-login-input { padding-inline-end: 40px; }
.dc-page .dc-pw-toggle { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--g-text-faint); cursor: pointer; padding: 6px 8px; display: flex; align-items: center; }
.dc-page .dc-pw-toggle:hover { color: var(--g-text-muted); }
.dc-page .dc-pw-toggle i { font-size: 14px; }

/* language picker: a RadioButtonList painted as two chips, so the choice still posts
   back as a normal selected value and needs no script */
.dc-page .dc-lang { display: flex; gap: 7px; }
.dc-page .dc-lang input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.dc-page .dc-lang label { flex: 1; margin: 0; text-align: center; font-size: 12px; font-weight: 600; padding: 8px 0; border-radius: 4px; cursor: pointer; border: 1px solid var(--g-border); background: var(--g-surface); color: var(--g-text-muted); }
.dc-page .dc-lang input[type="radio"]:checked + label { border-color: var(--g-primary); background: var(--g-primary-soft); color: var(--g-primary-hover); }
.dc-page .dc-lang input[type="radio"]:focus + label { box-shadow: 0 0 0 3px rgba(1,169,172,0.2); }

/* one error treatment for the failed-login message, the no-access message and the
   empty-field validator */
.dc-page .dc-login-error { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--g-danger); background: var(--g-danger-soft); border: 1px solid var(--g-danger-border); border-radius: 4px; padding: 8px 11px; }
.dc-page .dc-login-error i { font-size: 13px; flex: 0 0 auto; }
.dc-page .dc-login-error .text-danger { display: inline; margin: 0; font-size: 12px; }

.dc-page .dc-login-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: none; background: var(--g-primary); color: #fff; font-size: 14px; font-weight: 600; padding: 11px 0; border-radius: 4px; cursor: pointer; font-family: inherit; margin-top: 4px; text-decoration: none; }
.dc-page .dc-login-submit:hover, .dc-page .dc-login-submit:focus { background: var(--g-primary-hover); color: #fff; text-decoration: none; }
.dc-page .dc-login-submit i { font-size: 15px; }

.dc-page .dc-login-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--g-border-soft); font-size: 11px; color: var(--g-text-faint); }
.dc-page .dc-login-foot sup { font-size: 8px; }

@media (max-width: 640px) {
    .dc-page .dc-login { padding: 20px 16px; }
    .dc-page .dc-login-aside, .dc-page .dc-login-main { padding: 32px 24px; }
}


/* =========================================================================================
   Sidebar navigation  (dc-nav-*)

   The one section of this file that is NOT scoped under .dc-page: it dresses the shared
   sidebar in Site.master, which sits outside the page content. Every rule is still scoped
   under .pcoded-navbar or a dc-nav-* class, so nothing here reaches page markup either.

   The menu tree itself stays with the theme (files/assets/css/style.css). What is added is
   the pinned search box, the per-group item counts, the recent list and the user block, and
   the rail is painted a shade darker than the header so the two read apart.
   ========================================================================================= */

/* The rail becomes a flex column: search pinned on top, tree scrolling in the middle, user
   block pinned at the bottom. .main-menu carries a height from mCustomScrollbar, which the
   script drops on load (dcNavInit) - the !important keeps the column right either way. */
.pcoded[theme-layout="vertical"] .pcoded-navbar { display: flex; flex-direction: column; overflow: hidden; }
.pcoded[theme-layout="vertical"] .pcoded-navbar[navbar-theme="theme1"] { background: #2f3a4f; }
/* the rail is fixed to the viewport but starts below the 56px header (.pcoded-main-container
   carries that margin), so its 100% height has to lose the same 56px — otherwise the foot of
   the column, and with it the user block, sits below the fold */
.pcoded[theme-layout="vertical"] .pcoded-navbar[pcoded-navbar-position="fixed"] { height: calc(100vh - 56px); }
.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-inner-navbar { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; margin-top: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 10px; }

/* thin rail scrollbar, so the menu keeps its width whether it scrolls or not */
.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-inner-navbar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.16) transparent; }
.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-inner-navbar::-webkit-scrollbar { width: 6px; }
.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-inner-navbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); border-radius: 3px; }
.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-inner-navbar::-webkit-scrollbar-track { background: transparent; }

/* --- search box ------------------------------------------------------------- */
.dc-nav-search { flex: 0 0 auto; padding: 14px 14px 12px; position: relative; }
.dc-nav-search .dc-nav-search-box { position: relative; }
.dc-nav-search input { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 9px 34px; font-size: 13px; color: #fff; font-family: inherit; line-height: 1.3; }
.dc-nav-search input::-webkit-input-placeholder { color: #7c879b; }
.dc-nav-search input::-ms-input-placeholder { color: #7c879b; }
.dc-nav-search input::placeholder { color: #7c879b; }
.dc-nav-search input:focus { outline: none; border-color: rgba(1,169,172,0.55); }
/* IE10/11 adds its own clear button next to the one below */
.dc-nav-search input::-ms-clear { display: none; }
.dc-nav-search .dc-nav-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #7c879b; font-size: 14px; pointer-events: none; line-height: 1; }
.dc-nav-search .dc-nav-search-clear { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: #8b95a7; cursor: pointer; padding: 5px 6px; line-height: 1; display: none; }
.dc-nav-search .dc-nav-search-clear i { font-size: 13px; }
/* the "/" hint doubles as the shortcut that focuses the box */
.dc-nav-search .dc-nav-search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700; color: #6f7b91; border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; padding: 1px 5px; pointer-events: none; }
.dc-nav-searching .dc-nav-search .dc-nav-search-clear { display: block; }
.dc-nav-searching .dc-nav-search .dc-nav-search-kbd { display: none; }


/* --- group item count ------------------------------------------------------- */
/* injected by the script into each top-level entry, absolutely placed because the theme
   positions .pcoded-mtext absolutely too and the count would otherwise sit under it */
.pcoded[theme-layout="vertical"] .pcoded-navbar .pcoded-item > li > a .dc-nav-count { position: absolute; right: 34px; top: 7px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: rgba(255,255,255,0.07); color: #8b95a7; }

/* --- recent items ----------------------------------------------------------- */
.dc-nav-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 14px 6px 18px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #6f7b91; }
/* Empties the list in one go. It takes the caption's own type so it reads as part of the
   heading rather than as a fourth entry under it. */
.dc-nav-recent-clear { border: none; background: transparent; color: #6f7b91; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; line-height: 1; padding: 2px 4px; cursor: pointer; }
.dc-nav-recent-clear:hover, .dc-nav-recent-clear:focus { color: #ff8fa0; }
.dc-nav-recent { display: none; }
.dc-nav-recent.dc-nav-has-recent { display: block; }
.dc-nav-searching .dc-nav-recent { display: none; }
.dc-nav-recent ul { list-style: none; margin: 0; padding: 0; }
.dc-nav-recent li { display: flex; align-items: center; }
.dc-nav-recent li:hover { background: rgba(255,255,255,0.04); }
.dc-nav-recent a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 4px 8px 18px; color: #a9b2c3; font-size: 12.5px; }
.dc-nav-recent a:hover, .dc-nav-recent a:focus { color: #fff; text-decoration: none; }
.dc-nav-recent a i { font-size: 13px; flex: 0 0 auto; }
.dc-nav-recent a span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Drops the entry from the list. Kept out of the way until the row is pointed at or the button
   is tabbed to, so three shortcuts do not read as three delete buttons. */
.dc-nav-recent-x { flex: 0 0 auto; border: none; background: transparent; color: #6f7b91; cursor: pointer; padding: 6px 14px 6px 6px; line-height: 1; opacity: 0; transition: opacity .12s ease; }
.dc-nav-recent li:hover .dc-nav-recent-x, .dc-nav-recent-x:focus { opacity: 1; }
.dc-nav-recent-x:hover { color: #ff8fa0; }
.dc-nav-recent-x i { font-size: 12px; }
.dc-nav-recent .dc-nav-rule { height: 1px; background: rgba(255,255,255,0.07); margin: 10px 14px; }

/* --- empty search ----------------------------------------------------------- */
.dc-nav-empty { display: none; padding: 34px 22px; text-align: center; }
.dc-nav-empty i { font-size: 22px; color: #5c6779; }
.dc-nav-empty p { margin: 12px 0 0; font-size: 13px; color: #8b95a7; }
.dc-nav-empty .dc-nav-empty-q { margin: 4px 0 0; font-size: 12px; color: #6f7b91; word-break: break-word; }
.dc-nav-searching .dc-nav-empty.dc-nav-empty-on { display: block; }

/* an entry filtered out by the search - kept apart from the theme's own d-none, which marks
   the manage pages that are never in the menu at all */
.dc-nav-hit-none { display: none !important; }

/* --- user block ------------------------------------------------------------- */
.dc-nav-user { flex: 0 0 auto; border-top: 1px solid rgba(255,255,255,0.08); padding: 10px 10px 12px; }
.dc-nav-user-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.dc-nav-user.open .dc-nav-user-row { background: rgba(255,255,255,0.05); }
.dc-nav-user-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: #01a9ac; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dc-nav-user-id { flex: 1; min-width: 0; }
.dc-nav-user-id .dc-nav-user-name { display: block; font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-nav-user-id .dc-nav-user-role { display: block; font-size: 11px; color: #8b95a7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-nav-user-caret { font-size: 13px; color: #8b95a7; flex: 0 0 auto; }
.dc-nav-user-actions { display: none; padding-top: 6px; }
.dc-nav-user.open .dc-nav-user-actions { display: block; }
.dc-nav-user-actions a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 5px; color: #a9b2c3; font-size: 12.5px; }
.dc-nav-user-actions a:hover, .dc-nav-user-actions a:focus { background: rgba(255,255,255,0.05); color: #fff; text-decoration: none; }
.dc-nav-user-actions a i { font-size: 14px; flex: 0 0 auto; }
.dc-nav-user-actions .dc-nav-user-logout { color: #ff8fa0; }
.dc-nav-user-actions .dc-nav-user-logout:hover, .dc-nav-user-actions .dc-nav-user-logout:focus { color: #ff8fa0; }

/* The header hamburger needs nothing here: vartical-layout.min.js has it toggle the rail
   between "expanded" and "offcanvas", so the whole column slides off screen rather than
   narrowing to icons, and nothing in it has to be folded away. */

/* =========================================================================================
   Header language switch  (dc-lang-*)

   The link offers the language the user is not reading: a short code badge ("En" / "ع") next
   to that language named in its own script. Both come from the code-behind, so the badge
   needs no icon font and no image.
   ========================================================================================= */

/* nav-right gives its rows line-height 3.5 for the 56px bar; the switch takes its own so the
   box stays the size of its contents, and vertical-align centres it in that row */
.dc-lang-switch { display: inline-flex; align-items: center; gap: 7px; line-height: 1.6; vertical-align: middle; }
.dc-lang-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 23px; height: 19px; padding: 0 5px; border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; font-size: 10px; font-weight: 700; line-height: 1; }
/* Arabic letterforms carry their weight lower and smaller than Latin caps at the same size,
   so the single ع is set larger to read as the same size as "En" */
.dc-lang-badge-ar { font-size: 13px; }