/* ===========================================================================
   cardcompact-2026-10-27 (Mike): "the cards on the portal - extensions, devices,
   users, Time Conditions, Call Flows ... are way too big". Compact density for the
   card grids on the customer page (Customer > Extensions, Devices, Users, Time
   Conditions, IVRs, Ring Groups, Call Flows, Voicemail, Call Centers).

   CSS only - no markup or behaviour change. Each card page keeps its own <style>
   block (colours, layout); this file only overrides sizes. Every rule is scoped to
   the customer page content panel (.cd-content) and prefixed "html body" so it
   outranks the pages' inline single-class rules without !important.

   TUNE: change the variables below.
   OFF (no build): empty this file on the server; users then need Ctrl+F5.
   =========================================================================== */
:root {
    --bpx-card-min: 200px;        /* min card width -> more cards per row (was 180-240px) */
    --bpx-card-min-ext: 180px;    /* Extensions kept its original 180px minimum */
    --bpx-card-gap: 8px;          /* gap between cards (was 16px) */
    --bpx-card-pad: 4px 8px;      /* card padding (was 12px) */
    --bpx-card-radius: 6px;       /* (was 8px) */
    --bpx-card-border: 1px;       /* border width (was 2px) */
    --bpx-card-title: 13px;       /* card title (was 16px) */
    --bpx-card-text: 12px;        /* second line (was 14px) */
    --bpx-card-small: 11px;       /* detail lines (was 12px) */
    --bpx-card-badge: 10px;       /* badges / pills */
    --bpx-card-line: 1.2;
    --bpx-card-dot: 9px;          /* enabled/disabled dot (was 12px) */
    --bpx-group-pad: 8px;         /* dashed group box padding (was 16px) */
    --bpx-group-gap: 12px;        /* space between groups (was 30px) */
    --bpx-group-title: 14px;      /* group header (was 18px) */
    --bpx-stat-value: 18px;       /* stats bar numbers (was 24px) */
    --bpx-content-pad: 12px;      /* panel padding around the grid (was 20px) */
}

/* ---- panel + stats bar + group boxes ---------------------------------------- */
html body .cd-content .diagram-content,
html body .cd-content .rg-content {
    padding: var(--bpx-content-pad);
}

html body .cd-content .stats-bar {
    gap: 16px;
    margin-bottom: 10px;
    padding: 6px 12px;
    flex-wrap: wrap;
}
html body .cd-content .stats-bar .stat-value { font-size: var(--bpx-stat-value); line-height: 1.2; }
html body .cd-content .stats-bar .stat-label { font-size: 11px; }

html body .cd-content :is(.extension-group, .device-group, .user-group, .time-condition-group,
    .call-flow-group, .ivr-menu-group, .voicemail-group, .call-center-group) {
    margin-bottom: var(--bpx-group-gap);
    padding: var(--bpx-group-pad);
    border-width: 1px;
    border-radius: 8px;
}

html body .cd-content .group-header {
    font-size: var(--bpx-group-title);
    margin-bottom: 8px;
    padding: 3px 8px;
}

/* ---- grids ------------------------------------------------------------------ */
html body .cd-content :is(.devices-grid, .users-grid, .time-conditions-grid, .call-flows-grid,
    .rg-grid, .ivr-menus-grid, .voicemails-grid, .call-centers-grid) {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--bpx-card-min), 100%), 1fr));
    gap: var(--bpx-card-gap);
}
html body .cd-content .extensions-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(var(--bpx-card-min-ext), 100%), 1fr));
    gap: var(--bpx-card-gap);
}

/* ---- cards ------------------------------------------------------------------ */
html body .cd-content :is(.extension-card, .device-card, .user-card, .time-condition-card,
    .call-flow-card, .rg-card, .ivr-menu-card, .voicemail-card, .call-center-card) {
    padding: var(--bpx-card-pad);
    border-width: var(--bpx-card-border);
    border-radius: var(--bpx-card-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    line-height: var(--bpx-card-line);
    min-width: 0;                 /* never force the grid wider than the screen */
    overflow-wrap: anywhere;
}
html body .cd-content :is(.extension-card, .device-card, .user-card, .time-condition-card,
    .call-flow-card, .rg-card, .ivr-menu-card, .voicemail-card, .call-center-card):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
}

/* title line */
html body .cd-content :is(.extension-number, .device-label, .user-username, .time-condition-name,
    .call-flow-name, .rg-name, .ivr-menu-name, .voicemail-id, .call-center-name) {
    font-size: var(--bpx-card-title);
    margin-bottom: 1px;
    line-height: var(--bpx-card-line);
}
/* long Time Condition names already shrink themselves - keep that, just cap it */
html body .cd-content .time-condition-name.long-name { font-size: 12.5px; }
html body .cd-content .time-condition-name.very-long-name { font-size: 11px; }

/* second line */
html body .cd-content :is(.extension-name, .device-address, .user-email, .time-condition-number,
    .call-flow-extension, .rg-ext, .ivr-menu-extension, .voicemail-email, .call-center-extension) {
    font-size: var(--bpx-card-text);
    margin-bottom: 1px;
}

/* detail lines */
html body .cd-content :is(.extension-details, .device-details, .user-details, .time-condition-details,
    .call-flow-details, .rg-details, .ivr-menu-details, .voicemail-details, .call-center-details) {
    font-size: var(--bpx-card-small);
}
html body .cd-content :is(.connection-indicator, .greeting-indicator, .email-indicator) {
    font-size: 11px;
    margin-top: 1px;
}
html body .cd-content .device-header { margin-bottom: 1px; }

/* badges / pills */
html body .cd-content :is(.template-badge, .order-badge, .feature-badge, .user-badge, .strategy-badge) {
    font-size: var(--bpx-card-badge);
    padding: 0 6px;
    margin-top: 2px;
    line-height: 1.6;
}
html body .cd-content .status-pill { padding: 0 5px; font-size: var(--bpx-card-badge); }
html body .cd-content :is(.extension-card, .device-card, .user-card, .time-condition-card,
    .call-flow-card, .rg-card, .ivr-menu-card, .voicemail-card, .call-center-card) .rz-badge {
    padding: 0 5px;
    line-height: 1.6;
}
/* Extensions: the softphone badge sits in its own row with an inline margin-top:4px */
html body .cd-content .extension-card > div:last-child:has(> .rz-badge) { margin-top: 2px !important; }
html body .cd-content .extension-card > .rz-badge { margin-top: 2px !important; }

/* enabled/disabled dot (top right). The Extensions registration dot (.reg-dot,
   top left, green/grey - regdot-2026-10-26) is left exactly as it is. */
html body .cd-content :is(.time-condition-status, .user-status, .rg-status, .ivr-menu-status, .voicemail-status) {
    top: 6px;
    right: 6px;
    width: var(--bpx-card-dot);
    height: var(--bpx-card-dot);
}

/* Call Center agent roster inside the queue card */
html body .cd-content .call-center-card .agent-roster { margin-top: 4px; padding-top: 4px; }
html body .cd-content .call-center-card .agent-row { font-size: 11.5px; padding: 1px 0; }

/* in-card buttons that have an icon become icon-only (Voicemail "Messages",
   Call Center agent "Status"); the label stays for screen readers and the title
   attribute stays as the tooltip */
html body .cd-content :is(.voicemail-card, .call-center-card) .rz-button:has(.rz-button-icon-left) .rz-button-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
html body .cd-content :is(.voicemail-card, .call-center-card) .rz-button:has(.rz-button-icon-left) .rz-button-icon-left {
    margin: 0;
}

/* keyboard focus stays visible on everything clickable inside a card */
html body .cd-content :is(.extension-card, .device-card, .user-card, .time-condition-card,
    .call-flow-card, .rg-card, .ivr-menu-card, .voicemail-card, .call-center-card) :is(button, input, .rz-button):focus-visible {
    outline: 2px solid var(--rz-primary, #37A02D);
    outline-offset: 1px;
}

/* touch screens: keep a 32px tap target for the small in-card buttons */
@media (pointer: coarse) {
    html body .cd-content :is(.extension-card, .device-card, .user-card, .time-condition-card,
        .call-flow-card, .rg-card, .ivr-menu-card, .voicemail-card, .call-center-card) :is(button, .rz-button) {
        min-width: 32px;
        min-height: 32px;
    }
    html body .cd-content .device-card input[type="checkbox"] { min-width: 20px; min-height: 20px; }
}

/* phones: one card per row, a little tighter around the edges */
@media (max-width: 600px) {
    :root { --bpx-content-pad: 8px; --bpx-group-pad: 6px; }
    html body .cd-content :is(.extensions-grid, .devices-grid, .users-grid, .time-conditions-grid,
        .call-flows-grid, .rg-grid, .ivr-menus-grid, .voicemails-grid, .call-centers-grid) {
        grid-template-columns: 1fr;
    }
}

/* Extensions: room on the left for the registration dot (regdot-2026-10-26, top-left) */
html body .cd-content .extension-card { padding-left: 15px; }