/* ═══════════════════════════════════════════════════════════════════════
   PRSH Technologies — Universal Sidebar System
   NOTE: usb-* BASE rules already live in main-website.css (lines ~7951-7984).
         This file adds:
           • .prsh-sidebar wrapper (sticky, scroll, responsive)
           • usb-head--services / usb-head--tech gradient variants
           • sw-* universal widget card system
           • Correct html.theme-dark dark mode (main-website.css uses [data-theme] which doesn't match the toggle)
           • Custom-layout aside overrides (btp/sac/jv2/ar2/sf2)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
    --sb-radius:  14px;
    --sb-radius-sm: 10px;
    --sb-gap:     16px;
    --sb-top:     100px;
    --c-blue:     #2563eb;
    --c-blue-l:   #eff6ff;
    --c-violet:   #7c3aed;
    --c-violet-l: #f5f3ff;
    --c-cyan:     #0891b2;
    --c-cyan-l:   #ecfeff;
    --c-green:    #059669;
    --c-green-l:  #ecfdf5;
    --c-orange:   #d97706;
    --c-orange-l: #fffbeb;
    --c-rose:     #e11d48;
    --c-rose-l:   #fff1f2;
    --c-navy:     #1e3a5f;
}

/* ════════════════════════════════════════════
   1. SIDEBAR WRAPPER
   ════════════════════════════════════════════ */
.prsh-sidebar {
    position: sticky;
    top: var(--sb-top);
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--sb-gap);
    padding-bottom: 24px;
}

/* ════════════════════════════════════════════
   2. USB-HEAD GRADIENT VARIANTS
   (overrides the default blue gradient from main-website.css)
   ════════════════════════════════════════════ */
.usb-head.usb-head--services {
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
}
.usb-head.usb-head--tech {
    background: linear-gradient(135deg, #1e3a8a 0%, #0070f3 60%, #0ea5e9 100%);
}

/* ════════════════════════════════════════════
   3. SW-* WIDGET CARD SYSTEM
   ════════════════════════════════════════════ */
.sw-card {
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: var(--sb-radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    transition: box-shadow .25s, transform .25s;
}
.sw-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,.1);
    transform: translateY(-2px);
}

/* widget header strip */
.sw-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #fff;
}
.sw-head i { font-size: 1.05rem; opacity: .9; }
.sw-head h4 { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .07em; }

.sw-head--navy   { background: linear-gradient(135deg, #1e3a5f 0%, #2d5282 100%); }
.sw-head--blue   { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); }
.sw-head--violet { background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 100%); }
.sw-head--green  { background: linear-gradient(135deg, #047857 0%, #059669 100%); }
.sw-head--orange { background: linear-gradient(135deg, #b45309 0%, #d97706 100%); }
.sw-head--cyan   { background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%); }

/* widget body */
.sw-body { padding: 18px; }
.sw-body > p {
    font-size: .845rem;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 14px;
}

/* stats grid */
.sw-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.sw-stat {
    background: #f8fafc;
    border: 1px solid #e8ecf4;
    border-radius: var(--sb-radius-sm);
    padding: 12px 10px;
    text-align: center;
    transition: background .2s, border-color .2s;
}
.sw-stat:hover { background: #eff6ff; border-color: #bfdbfe; }

.sw-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 1rem;
    margin: 0 auto 8px;
}
.sw-stat-icon--blue   { background: var(--c-blue-l);   color: var(--c-blue); }
.sw-stat-icon--violet { background: var(--c-violet-l); color: var(--c-violet); }
.sw-stat-icon--cyan   { background: var(--c-cyan-l);   color: var(--c-cyan); }
.sw-stat-icon--green  { background: var(--c-green-l);  color: var(--c-green); }
.sw-stat-icon--orange { background: var(--c-orange-l); color: var(--c-orange); }

.sw-stat-val {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}
.sw-stat-lbl {
    display: block;
    font-size: .68rem;
    color: #6b7280;
    margin-top: 3px;
    line-height: 1.3;
}

/* contact row inside widget */
.sw-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0 0;
    border-top: 1px solid #e8ecf4;
    margin-top: 4px;
}
.sw-contact-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #fff;
}
.sw-contact-circle--navy   { background: linear-gradient(135deg, #1e3a5f, #2563eb); }
.sw-contact-circle--violet { background: linear-gradient(135deg, #5b21b6, #7c3aed); }
.sw-contact-info { flex: 1; min-width: 0; }
.sw-contact-info small {
    display: block;
    font-size: .68rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 3px;
}
.sw-phone-link {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: #111827;
    text-decoration: none;
    transition: color .18s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sw-phone-link:hover { color: var(--c-blue); text-decoration: none; }

/* metric / progress bars */
.sw-metric-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sw-metric-label {
    display: flex;
    justify-content: space-between;
    font-size: .78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 5px;
}
.sw-metric-track {
    height: 6px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
}
.sw-metric-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--c-blue), var(--c-violet));
}
.sw-metric-fill--green  { background: linear-gradient(90deg, #059669, #34d399); }
.sw-metric-fill--orange { background: linear-gradient(90deg, #d97706, #f59e0b); }
.sw-metric-fill--violet { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.sw-metric-fill--cyan   { background: linear-gradient(90deg, #0891b2, #22d3ee); }

/* download/resource items */
.sw-dl { display: flex; flex-direction: column; gap: 8px; }
.sw-dl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e8ecf4;
    border-radius: var(--sb-radius-sm);
    text-decoration: none;
    color: #374151;
    font-size: .845rem;
    transition: background .2s, border-color .2s, transform .2s;
}
.sw-dl-item:hover {
    background: #f8fafc;
    border-color: #93c5fd;
    transform: translateX(3px);
    text-decoration: none;
    color: var(--c-blue);
}
.sw-dl-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 7px;
    font-size: .9rem;
    flex-shrink: 0;
}
.sw-dl-icon--pdf  { background: #fee2e2; color: #dc2626; }
.sw-dl-icon--doc  { background: #dbeafe; color: #2563eb; }
.sw-dl-icon--link { background: #ecfdf5; color: #059669; }
.sw-dl-body { flex: 1; min-width: 0; }
.sw-dl-body strong { display: block; font-size: .84rem; font-weight: 600; line-height: 1.2; }
.sw-dl-body span   { display: block; font-size: .72rem; color: #6b7280; margin-top: 1px; }
.sw-dl-arrow { font-size: 1rem; color: #9ca3af; transition: transform .2s, color .2s; }
.sw-dl-item:hover .sw-dl-arrow { color: var(--c-blue); transform: translateX(3px); }

/* CTA button inside widget */
.sw-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity .2s, transform .2s;
    margin-top: 14px;
    color: #fff;
}
.sw-btn:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; color: #fff; }
.sw-btn--blue   { background: var(--c-blue); }
.sw-btn--violet { background: var(--c-violet); }
.sw-btn--navy   { background: var(--c-navy); }

/* ════════════════════════════════════════════
   4. DARK MODE  (correct selector: html.theme-dark)
   main-website.css uses [data-theme="dark"] which is wrong for this project
   ════════════════════════════════════════════ */

/* usb-* dark overrides */
html.theme-dark .usb-card {
    background: #1a2234;
    border-color: rgba(255,255,255,.08);
}
html.theme-dark .usb-link { color: #cbd5e1; }
html.theme-dark .usb-link:hover {
    background: rgba(37,99,235,.12);
    border-left-color: #3b82f6;
    color: #93c5fd;
}
html.theme-dark .usb-link.usb-active {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #0ea5e9 100%);
    color: #fff !important;
}

/* sw-* dark overrides */
html.theme-dark .sw-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
html.theme-dark .sw-body > p { color: #94a3b8; }
html.theme-dark .sw-stat { background: #0f172a; border-color: #334155; }
html.theme-dark .sw-stat:hover { background: rgba(37,99,235,.1); border-color: #1d4ed8; }
html.theme-dark .sw-stat-val { color: #f1f5f9; }
html.theme-dark .sw-stat-lbl { color: #64748b; }
html.theme-dark .sw-contact { border-color: #334155; }
html.theme-dark .sw-contact-info small { color: #64748b; }
html.theme-dark .sw-phone-link { color: #e2e8f0; }
html.theme-dark .sw-phone-link:hover { color: #93c5fd; }
html.theme-dark .sw-metric-track { background: #334155; }
html.theme-dark .sw-metric-label { color: #cbd5e1; }
html.theme-dark .sw-dl-item { border-color: #334155; color: #cbd5e1; }
html.theme-dark .sw-dl-item:hover { background: #273549; border-color: #3b82f6; color: #93c5fd; }

/* ════════════════════════════════════════════
   5. CUSTOM-LAYOUT ASIDE OVERRIDES
   These asides already have their own sticky + flex-column CSS.
   Disable nested sticky/overflow on .prsh-sidebar inside them.
   ════════════════════════════════════════════ */
.btp-sidebar > .prsh-sidebar,
.sac-sidebar > .prsh-sidebar,
.jv2-sidebar > .prsh-sidebar,
.ar2-sidebar > .prsh-sidebar,
.sf2-sidebar > .prsh-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
    padding-bottom: 0;
}

/* ════════════════════════════════════════════
   6. RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 991px) {
    .prsh-sidebar {
        position: static;
        align-self: auto;
        margin-top: 40px;
        padding-bottom: 0;
    }
}