/* ================================================================
   SyllabusPlanerSetup.razor.css
   
   This is a Blazor CSS Isolation file.
   Place it alongside SyllabusPlanerSetup.razor
   
   ::deep pierces the scope boundary and reaches child components
   including Syncfusion's rendered DOM — this is the ONLY way to
   style Syncfusion elements from a .razor file reliably.
   ================================================================ */

::deep .spc-accordion .e-acrdn-item .e-acrdn-header {
    background-color: #111827 !important;
    background-image: linear-gradient(135deg, #1a2340 0%, #111827 100%) !important;
    min-height: 52px !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: 0 2px 6px rgba(15,23,42,.28) !important;
}

    ::deep .spc-accordion .e-acrdn-item .e-acrdn-header:hover {
        background-color: #1F2937 !important;
        background-image: linear-gradient(135deg, #22304f 0%, #1F2937 100%) !important;
    }

::deep .spc-accordion .e-acrdn-item.e-select > .e-acrdn-header,
::deep .spc-accordion .e-acrdn-item.e-active > .e-acrdn-header,
::deep .spc-accordion .e-acrdn-item.e-expand-state > .e-acrdn-header,
::deep .spc-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
    background-color: #1F2937 !important;
    background-image: linear-gradient(135deg, #22304f 0%, #1F2937 100%) !important;
}

::deep .spc-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
    width: 100% !important;
    padding: 0 !important;
}

::deep .spc-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon,
::deep .spc-accordion .e-acrdn-item .e-acrdn-header .e-tgl-collapse-icon {
    color: rgba(255,255,255,.85) !important;
    font-size: 13px !important;
}

::deep .spc-acc-classname {
    color: #ffffff !important;
    font-weight: 700 !important;
}

::deep .spc-acc-icon {
    color: rgba(255,255,255,.70) !important;
}

::deep .spc-acc-subj-pill {
    color: rgba(255,255,255,.92) !important;
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.22) !important;
}

::deep .spc-accordion .e-acrdn-item,
::deep .spc-accordion .e-acrdn-item .e-acrdn-panel,
::deep .spc-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

::deep .spc-month-name {
    white-space: nowrap !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    min-width: max-content !important;
}