/*
 * PCCS Internal Theme Variables
 * ─────────────────────────────
 * All styling tokens used within the ProjectCollectionContentSorting component
 * tree are defined here under .pccs__outer. Host apps override them by targeting
 * .pccs__outer (or any ancestor) in their own stylesheet.
 *
 * TCP overrides live in TMC.Shared.TCP.Components/wwwroot/css/tcpColors.css.
 */

.pccs__outer {
    /* ── Semantic colours ── */
    --pccs-color-primary: #2563eb;
    --pccs-color-danger: #ef4444;

    /* ── Text ── */
    --pccs-text-default: #1a1d23;
    --pccs-text-secondary: #6b7280;

    /* ── Borders ── */
    --pccs-border-default: #c9cdd4;
    --pccs-border-light: #e5e7eb;

    /* ── Surfaces ── */
    --pccs-surface-card: #f3f4f6;
    --pccs-surface-default: #fff;
    --pccs-surface-hover: #f3f4f6;
    --pccs-surface-subtle: #f9fafb;

    /* ── Group accordion level backgrounds ── */
    --pccs-group-l1-bg: #F0F0F0; /* L1 header + body */
    --pccs-group-l2-bg: #E8E8E8; /* L2 header + body, L3 body */
    --pccs-group-l3-bg: #E3E3E3; /* L2 header + body, L3 body */

    /* ── Info (L3 group title badge — blue) ── */
    --pccs-info-bg: #F2FAFD;
    --pccs-info-bg-hover: #E4F6FC;
    --pccs-info-text: #177691;

    /* ── Accent (chip / selection / active state) ── */
    --pccs-accent: #195C90;
    --pccs-accent-hover: #004D7F;
    --pccs-accent-light: #F3F9FF;
    --pccs-accent-outline: #2F6FA4;
    --pccs-accent-solid-text: #fff;

    /* ── Subscription parameter widget card ── */
    --pccs-sub-card-bg:      #F3F9FF;  /* light blue tint — matches cp-primary-lighten */
    --pccs-sub-card-border:  #195C90;  /* navy — matches cp-primary-900               */

    /* ── Subscription parameter widget bar colours ── */
    --pccs-sub-bar-new:      var(--pccs-color-primary); /* new-cycle consumption — primary blue */
    --pccs-sub-bar-holdover: #93c5fd;                   /* holdover — lighter blue */
    --pccs-sub-bar-exceeded: var(--pccs-color-danger);  /* at or over capacity — red */

    /* ── Subscription parameter type bar colours (match V1 per-type palette) ── */
    --pccs-sub-bar-nr:        #0091FF;  /* touch-nr-500       — Movies New Releases */
    --pccs-sub-bar-classics:  #13B7D8;  /* touch-classics-400 — Movies Classics     */
    --pccs-sub-bar-tv:        #5B5BD6;  /* touch-tv-500       — TV Episodes         */
    --pccs-sub-bar-audio:     #12A594;  /* touch-audio-500    — Audio Tracks        */

    /* ── Table (PccsTableView) ── */
    --pccs-table-header-bg: #f0f0f0;
    --pccs-table-header-height: 42px;
    --pccs-table-header-font-size: 12px;
    --pccs-table-cell-border: #ddd;
    --pccs-table-cell-padding: 8px 12px;
    --pccs-table-cell-font-size: 12px;
    --pccs-table-row-hover: var(--pccs-surface-subtle);
    --pccs-table-row-selected: #eff6ff;
    --pccs-table-row-approved: #30a46c;
    --pccs-table-row-pending: #ffc53d;
    --pccs-table-row-rejected: #e5484d;
    --pccs-table-row-placeholder-bg: #f2fafd;
    --pccs-table-row-draft-bg: #fefdfb;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Group accordion level styles — NOT scoped (.razor.css would add a scope attr
 * that breaks child selectors across component boundaries). These classes are
 * applied via the AccordionStyles delegate in ProjectCollectionContentSorting.
 * ───────────────────────────────────────────────────────────────────────────── */

.pccs-group-l1__header,
.pccs-group-l2__header,
.pccs-group-l3__header {
    padding: 16px!important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

.pccs-group-l1__body,
.pccs-group-l2__body,
.pccs-group-l3__body {
    padding: 8px 20px 8px !important;
}


.pccs-group-l1,
.pccs-group-l1__header,
.pccs-group-l1__body {
    border: none !important;
    background: var(--pccs-group-l1-bg) !important;
}

/* L1 — outermost group level */
.pccs-group-l1 {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* L2 — second group level */
.pccs-group-l2,
.pccs-group-l2__header,
.pccs-group-l2__body {
    border: none !important;
    background: var(--pccs-group-l2-bg) !important;
}

.pccs-group-l2 {
    border-radius: 8px !important;
    overflow: hidden !important;
}


/* L3 — deepest group level */
.pccs-group-l3,
.pccs-group-l3__header,
.pccs-group-l3__body {
    border: none !important;
    background: var(--pccs-group-l3-bg) !important;
}

.pccs-group-l3 {
    border-radius: 8px !important;
    overflow: hidden !important;
}


.pccs-group-l3__title-badge {
    /*  flex: 1;
     white-space: normal;
     background: var(--pccs-info-bg)!important;
     color: var(--pccs-info-text)!important;
     border-radius: 8px!important;
     padding: 8px 20px!important;
     font-size: 14px!important;
     font-weight: 600!important; */
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Subscription parameter capacity widget
 * Rendered via PccsRenderFragments.SubscriptionParamWidget(). Unscoped because
 * the static RenderFragment method is not a Blazor component and therefore
 * receives no scope attribute.
 * ───────────────────────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────────────────────
 * ContentOverview Index.razor — scoped component styles
 * ───────────────────────────────────────────────────────────────────────────── */

/* Subscription parameter capacity cards row inside GroupHeader.
 * Wraps the pccs-sub-param-widget elements when GroupBy = Subscription.
 * V1 equivalent: flex flex-grow flex-wrap items-center gap-6 (Tailwind)      */

.pccs-index-sub-params {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem; 
    margin-left: 1rem;
    min-width: 0;
    overflow: hidden;
}

.pccs-sub-param-widget {
    border-radius: 10px;
    padding: 4px 12px 6px;
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pccs-sub-param-widget__top {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pccs-sub-param-widget__name {
    font-size: 12px;
    color: var(--pccs-text-default);
    flex: 1;
    min-width: 0;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pccs-sub-param-widget__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--pccs-text-default);
    white-space: nowrap;
    flex-shrink: 0;
}

.pccs-sub-param-widget__bar-track {
    height: 8px;
    border-radius: 10px;
    background: var(--touch-neutral-500); 
    overflow: hidden;
}

.pccs-sub-param-widget__bar-fill {
    height: 100%;
    border-radius: 2px;
}

/* Split bar (holdover + new side-by-side) */
.pccs-sub-param-widget__bar-split {
    height: 100%;
    display: flex;
    border-radius: 2px;
    overflow: hidden;
}

.pccs-sub-param-widget__bar-fill--holdover {
    height: 100%;
    background: var(--pccs-sub-bar-holdover);
    transition: width 0.2s ease;
}

.pccs-sub-param-widget__bar-fill--new {
    height: 100%;
    background: var(--pccs-sub-bar-new);
    transition: width 0.2s ease;
}

.pccs-sub-param-widget__bar-fill--exceeded {
    background: var(--pccs-sub-bar-exceeded) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * IFE System Capacity widget
 * Rendered by PccsRenderFragments.IFESystemCapacityWidget in the GroupHeaderTemplate
 * when grouped by IFE System. Compact: name + consumed/capacity label + progress bar.
 * Unscoped — rendered via RenderFragment passed through GroupedContent.
 * ───────────────────────────────────────────────────────────────────────────── */

.pccs-ife-widget {
    border: 1.5px solid var(--pccs-sub-card-border);
    border-radius: 10px;
    padding: 4px 12px 6px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
    gap: 4px;
    background: var(--pccs-sub-card-bg);
}

.pccs-ife-widget__top {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pccs-ife-widget__name {
    font-size: 12px;
    color: var(--pccs-text-default);
    flex: 1;
    min-width: 0;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pccs-ife-widget__count {
    font-size: 12px;
    font-weight: 600;
    color: var(--pccs-text-default);
    white-space: nowrap;
    flex-shrink: 0;
}

.pccs-ife-widget__bar-track {
    height: 8px;
    border-radius: 10px;
    background: var(--pccs-border-light);
    overflow: hidden;
}

.pccs-ife-widget__bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.2s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Default action card ("Add new title")
 * Rendered by ProjectCollectionContentSorting._defaultActionCard when
 * AllowAdding=true and no custom ActionCardTemplate is provided.
 * Unscoped because the RenderFragment is passed through GroupedContent →
 * VirtualizedList — Blazor CSS isolation would scope to the wrong component.
 * ───────────────────────────────────────────────────────────────────────────── */

.pccs-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 170px;
    border-radius: 16px;
    border: 2px dashed var(--pccs-border-light);
    background: var(--pccs-surface-default);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}

.pccs-action-card:hover {
    border-color: var(--pccs-color-primary);
    background: var(--pccs-surface-subtle);
}

.pccs-action-card__icon {
    width: 28px;
    height: 28px;
    color: var(--pccs-text-secondary);
    transition: color 0.2s;
}

.pccs-action-card:hover .pccs-action-card__icon {
    color: var(--pccs-color-primary);
}

.pccs-action-card__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pccs-text-secondary);
    transition: color 0.2s;
}

.pccs-action-card:hover .pccs-action-card__label {
    color: var(--pccs-color-primary);
}