/* Django admin (Unfold) overrides, loaded via UNFOLD["STYLES"] after Unfold's own stylesheet.
   Unfold styles links as bold body text, so they can't be told apart from plain values. Colour
   them with a muted mix of the primary colour and body text (full primary is too loud with several
   links per row), brightening to full primary on hover. */

/* Changelist cells (the row link, plus links a column renders itself), read-only fields and detail page tables */
#result_list tbody a,
.readonly a,
.detail-table a {
    color: color-mix(in oklch, var(--color-primary-600) 60%, var(--color-font-default-light));
}

.dark #result_list tbody a,
.dark .readonly a,
.dark .detail-table a {
    color: color-mix(in oklch, var(--color-primary-400) 60%, var(--color-font-default-dark));
}

#result_list tbody a:hover,
.readonly a:hover,
.detail-table a:hover {
    color: var(--color-primary-600);
}

.dark #result_list tbody a:hover,
.dark .readonly a:hover,
.dark .detail-table a:hover {
    color: var(--color-primary-400);
}

/* Values coloured by their state, links in them too: fine, or needing a look (such as a port-out's numbers on its
   customer, or not) */
.state-ok,
.state-ok a {
    color: var(--color-green-700);
}

.state-warning,
.state-warning a {
    color: var(--color-orange-700);
}

.dark .state-ok,
.dark .state-ok a {
    color: var(--color-green-400);
}

.dark .state-warning,
.dark .state-warning a {
    color: var(--color-orange-400);
}

/* Multi-field rows (a nested tuple in fields/fieldsets). Stock Django admin lays these side by
   side (.form-multiline); Unfold's fieldset_row.html drops that wrapper and stacks them, so restore
   it on wide screens. Unfold's fixed label column beside each field leaves too little room for the
   fields, so in these rows the label goes above its field instead, as Unfold does on narrow screens
   (and crispy forms and Viewflow do), and each field gets an equal share of the row. Single-field
   rows keep the label column. */
@media (min-width: 1024px) {
    .field-row:has(> .field-line + .field-line) {
        display: flex;
    }

    .field-row:has(> .field-line + .field-line) > .field-line {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
    }

    /* The label, or for a checkbox, its label-and-toggle wrapper */
    .field-row:has(> .field-line + .field-line) > .field-line > div:first-child {
        width: auto;
        min-width: 0;
        height: auto;
        line-height: inherit;
        margin-bottom: calc(var(--spacing) * 2);
    }

    .field-row:has(> .field-line + .field-line) > .field-line > .lg\:flex-row {
        flex-direction: column;
        margin-bottom: 0;
    }

    .field-row:has(> .field-line + .field-line) > .field-line .lg\:w-56 {
        width: auto;
        min-width: 0;
        margin-left: 0;
    }
}

/* Customer edit form's Rate groups fieldset: both lists of the two-pane picker tall enough to show a typical
   customer's 5-8 rate groups without scrolling, and more of the available ones */
.rate-groups .selector select[multiple] {
    height: 20rem;
}

/* Detail pages (templates/admin/detail.html): long unbroken values such as SIP contact URIs and
   user agents wrap instead of widening the card */
.detail-view .readonly td {
    overflow-wrap: anywhere;
}

/* Set cards and changelist tables on a darker page than their own background, as in Viewflow, so
   they stand out. Unfold gives the page and cards the same colour. */
#main {
    background-color: var(--color-base-100);
}

.dark #main {
    background-color: var(--color-base-950);
}

/* Form boxes (bordered fieldsets and tabular inlines) have no
   background of their own, so give them the card background */
.form-rows.border,
.formset-wrapper {
    background-color: white;
}

.dark .form-rows.border,
.dark .formset-wrapper {
    background-color: var(--color-base-900);
}

/* The search and filter bar above changelist tables, which Unfold only boxes on wide screens */
@media (min-width: 1024px) {
    #main .lg\:rounded-t-default {
        background-color: white;
    }

    .dark #main .lg\:rounded-t-default {
        background-color: var(--color-base-900);
    }
}

/* Porting order list tabs (porting/admin/queue_tabs.html): coloured counts a step stronger than Unfold's soft
   badges, which are faint beside the tab titles (more so in dark mode), but short of its solid ones. The
   sidebar's red badges (Porting Orders' Needs attention count) match the tab's. */
.queue-tabs .sidebar-badge.bg-red-100,
#nav-sidebar-apps .sidebar-badge.bg-red-100 {
    background-color: var(--color-red-200);
    color: var(--color-red-800);
}

.queue-tabs .sidebar-badge.bg-blue-100 {
    background-color: var(--color-blue-200);
    color: var(--color-blue-800);
}

.queue-tabs .sidebar-badge.bg-primary-100 {
    background-color: var(--color-primary-200);
    color: var(--color-primary-800);
}

.dark .queue-tabs .sidebar-badge.bg-red-100,
.dark #nav-sidebar-apps .sidebar-badge.bg-red-100 {
    background-color: color-mix(in oklch, var(--color-red-500) 35%, transparent);
    color: var(--color-red-300);
}

.dark .queue-tabs .sidebar-badge.bg-blue-100 {
    background-color: color-mix(in oklch, var(--color-blue-500) 35%, transparent);
    color: var(--color-blue-300);
}

.dark .queue-tabs .sidebar-badge.bg-primary-100 {
    background-color: color-mix(in oklch, var(--color-primary-500) 35%, transparent);
    color: var(--color-primary-300);
}

/* Fieldset, inline and app list headings are strips of the page's new colour, so they'd vanish */
#main h2.bg-base-100 {
    background-color: white;
}

.dark #main h2.bg-base-100 {
    background-color: var(--color-base-900);
}

/* Change forms' fieldsets and inlines closer together than Unfold's gap-6, now that each is one joined card */
#main form[id$="_form"] > .flex.flex-col.gap-6 {
    gap: calc(var(--spacing) * 3);
}

/* Fieldset and tabular inline headings join the top of their box as its header bar, a shade off the card, rather
   than floating above it as a strip of their own. A fieldset's description goes in the bar under its title. Only
   headings with their box straight after (and collapsibles while open) join; the box's top border divides them. */
#main fieldset.module > h2.bg-base-100:has(+ .form-rows.border, + .text-subtle + .form-rows.border, + div > .formset-wrapper:first-child),
#main fieldset.module > details[open] > summary > h2.bg-base-100,
#main fieldset.module > h2.bg-base-100 + .text-subtle:has(+ .form-rows.border),
#main fieldset.module > details[open] > summary + .text-subtle:has(+ .form-rows.border) {
    margin-bottom: 0;
    border: 1px solid var(--color-base-200);
    border-bottom: 0;
    border-radius: var(--border-radius, 6px) var(--border-radius, 6px) 0 0;
    background-color: var(--color-base-50);
}

/* The description continues the bar below the title */
#main fieldset.module > h2.bg-base-100 + .text-subtle:has(+ .form-rows.border),
#main fieldset.module > details[open] > summary + .text-subtle:has(+ .form-rows.border) {
    max-width: none;
    border-top: 0;
    border-radius: 0;
    padding: 0 calc(var(--spacing) * 3) calc(var(--spacing) * 2);
}

#main fieldset.module > details[open] > summary {
    margin-bottom: 0;
}

#main fieldset.module > h2.bg-base-100 + .form-rows.border,
#main fieldset.module > h2.bg-base-100 + .text-subtle + .form-rows.border,
#main fieldset.module > details > summary + .form-rows.border,
#main fieldset.module > details > summary + .text-subtle + .form-rows.border,
#main fieldset.module > h2.bg-base-100 + div > .formset-wrapper:first-child,
#main fieldset.module > details > summary + div > .formset-wrapper:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.dark #main fieldset.module > h2.bg-base-100:has(+ .form-rows.border, + .text-subtle + .form-rows.border, + div > .formset-wrapper:first-child),
.dark #main fieldset.module > details[open] > summary > h2.bg-base-100,
.dark #main fieldset.module > h2.bg-base-100 + .text-subtle:has(+ .form-rows.border),
.dark #main fieldset.module > details[open] > summary + .text-subtle:has(+ .form-rows.border) {
    border-color: var(--color-base-800);
    background-color: color-mix(in oklch, var(--color-base-900), var(--color-base-800) 50%);
}

/* Minute packs tab: a card per minute type (customer/admin/dashboard_change_list.html), with its allowance
   and remaining minutes side by side. Allowance is blue; remaining is green, orange when running low and red
   once used up (balance_totals' state), as is the bar beneath showing the share left. */
.minute-totals {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: calc(var(--spacing) * 4);
}

.minute-totals-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing) * 3);
}

.minute-totals-stat {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 1);
    border-radius: var(--border-radius, 6px);
    padding: calc(var(--spacing) * 3);
}

.minute-totals-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.minute-totals-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.minute-totals-allowance {
    background-color: var(--color-blue-50);
    color: var(--color-blue-700);
}

.minute-totals-remaining.minute-totals-ok {
    background-color: var(--color-green-50);
    color: var(--color-green-700);
}

.minute-totals-remaining.minute-totals-low {
    background-color: var(--color-orange-50);
    color: var(--color-orange-700);
}

.minute-totals-remaining.minute-totals-empty {
    background-color: var(--color-red-50);
    color: var(--color-red-700);
}

.dark .minute-totals-allowance {
    background-color: color-mix(in oklch, var(--color-blue-500) 15%, transparent);
    color: var(--color-blue-300);
}

.dark .minute-totals-remaining.minute-totals-ok {
    background-color: color-mix(in oklch, var(--color-green-500) 15%, transparent);
    color: var(--color-green-300);
}

.dark .minute-totals-remaining.minute-totals-low {
    background-color: color-mix(in oklch, var(--color-orange-500) 15%, transparent);
    color: var(--color-orange-300);
}

.dark .minute-totals-remaining.minute-totals-empty {
    background-color: color-mix(in oklch, var(--color-red-500) 15%, transparent);
    color: var(--color-red-300);
}

.minute-totals-bar {
    height: 0.375rem;
    margin-top: calc(var(--spacing) * 4);
    overflow: hidden;
    border-radius: 9999px;
    background-color: var(--color-base-100);
}

.dark .minute-totals-bar {
    background-color: var(--color-base-800);
}

.minute-totals-bar > div {
    height: 100%;
    border-radius: 9999px;
}

.minute-totals-bar.minute-totals-ok > div {
    background-color: var(--color-green-500);
}

.minute-totals-bar.minute-totals-low > div {
    background-color: var(--color-orange-500);
}

.minute-totals-bar.minute-totals-empty > div {
    background-color: var(--color-red-500);
}

.minute-totals-used {
    margin-top: calc(var(--spacing) * 2);
    font-size: 0.75rem;
    color: var(--color-base-500);
}

/* The Phone numbers tab's active numbers by country (dashboard_change_list.html), one card per country with a row
   per number type. Unknown types (no area prefix matches) show in orange, as they need a prefix set up. */

/* Cards are as wide as their title needs, so a long country name stays on one line, and wrap onto new rows. The card
   component's grow class is overridden so they don't stretch to fill a row. */
.number-totals {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 4);
}

.number-totals > * {
    flex: 0 1 auto;
    min-width: 16rem;
    max-width: 100%;
}

.number-totals-country {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    white-space: nowrap;
}

/* django-countries' flags are 16x11 GIFs */
.number-totals-flag {
    width: 16px;
    height: 11px;
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1);
}

.number-totals-total {
    margin-left: calc(var(--spacing) * 6);
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-base-500);
    font-variant-numeric: tabular-nums;
}

.number-totals-type {
    display: flex;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 1) 0;
}

.number-totals-type dd {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.number-totals-unknown {
    color: var(--color-orange-700);
}

.dark .number-totals-unknown {
    color: var(--color-orange-300);
}

/* Calls tab: the period shown (call_period in customer/admin_tabs.py), between its month buttons. */
.call-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
}

.call-period-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-font-important-light);
}

.dark .call-period-label {
    color: var(--color-font-important-dark);
}

/* Calls tab: the call summary cards (customer/admin/call_summary.html), side by side when there's room. Each is a
   compact table running to the card's edges, in the look of Unfold's tables, with its figures right aligned and the
   total row in bold. A country's row expands to its number types, rows of the same table, whose labels are indented
   past the country row's expand arrow. */
.call-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: calc(var(--spacing) * 4);
    align-items: start;
}

.call-summary-table {
    width: calc(100% + var(--spacing) * 6);
    margin: calc(var(--spacing) * -3);
    border-collapse: collapse;
}

.call-summary-table th,
.call-summary-table td {
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
    border-bottom: 1px solid var(--color-base-200);
    text-align: left;
    vertical-align: middle;
}

.call-summary-table th:first-child,
.call-summary-table td:first-child {
    padding-left: calc(var(--spacing) * 3);
}

.call-summary-table th:last-child,
.call-summary-table td:last-child {
    padding-right: calc(var(--spacing) * 3);
}

.call-summary-table thead th {
    font-weight: 600;
    white-space: nowrap;
    background-color: var(--color-base-50);
}

.call-summary-table tfoot td {
    font-weight: 600;
    border-bottom: 0;
}

.call-summary-table .call-summary-number {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.call-summary-toggle {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 1);
    text-align: left;
    cursor: pointer;
}

.call-summary-toggle .material-symbols-outlined {
    flex: none;
    font-size: 18px;
    transition: transform 0.15s;
}

.call-summary-toggle .material-symbols-outlined.call-summary-open {
    transform: rotate(90deg);
}

/* The toggle's arrow is 18px plus its gap */
.call-summary-table .call-summary-type td:first-child,
.call-summary-table tfoot td:first-child {
    padding-left: calc(var(--spacing) * 4 + 18px);
}

.call-summary-table .call-summary-type td {
    color: var(--color-base-500);
    background-color: var(--color-base-50);
}

.dark .call-summary-table th,
.dark .call-summary-table td {
    border-color: var(--color-base-800);
}

.dark .call-summary-table thead th,
.dark .call-summary-table .call-summary-type td {
    background-color: rgb(255 255 255 / 0.02);
}

.dark .call-summary-table .call-summary-type td {
    color: var(--color-base-400);
}

.call-summary-flag {
    display: inline-block;
    width: 1.25rem;
    margin-right: calc(var(--spacing) * 2);
    vertical-align: -0.1em;
}

/* Rates tab: the customer's rate groups (dashboard_change_list.html) as compact rounded chips, as in Viewflow, each
   toggling its group in the list's rate group filter. Those in it are in the primary colour. */
.rate-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing) * 2);
}

.rate-group-chip {
    border-radius: 9999px;
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    background-color: var(--color-base-100);
    color: var(--color-base-700);
}

.rate-group-chip:hover {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
}

.rate-group-chip.rate-group-chip-active {
    background-color: var(--color-primary-600);
    color: white;
}

.dark .rate-group-chip {
    background-color: var(--color-base-800);
    color: var(--color-base-200);
}

.dark .rate-group-chip:hover {
    background-color: var(--color-primary-900);
    color: var(--color-primary-200);
}

.dark .rate-group-chip.rate-group-chip-active {
    background-color: var(--color-primary-600);
    color: white;
}

/* Test rate on the customer dashboard's Rates tab (rating/admin/rate_lookup.html). The modal is widened for its
   table, which Unfold's max-w-2xl would squeeze. */
#modal-content.rate-lookup-modal {
    max-width: 72rem;
}

.rate-lookup-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--spacing) * 3);
}

@media (max-width: 640px) {
    .rate-lookup-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rate-lookup-used {
    color: var(--color-primary-600);
    font-weight: 600;
}

.dark .rate-lookup-used {
    color: var(--color-primary-400);
}

/* A Material Symbols icon in running text, such as a button's in the Rates tab's note, sized and aligned to it */
.material-symbols-outlined.inline-icon {
    font-size: 1.15em;
    vertical-align: -0.2em;
}