/* ============================================================
   STORAGE ROOMS .GR — Brand theme + Dashboard design system
   Loaded AFTER blackswan.css to re-skin the Spacious base.
   Palette pulled from storagerooms.gr
   ============================================================ */

:root {
    /* Brand — Storage Rooms blue */
    --accent-color:   #F44902;   /* primary brand blue   */
    --accent-dark:    #C93A02;   /* hover / pressed      */
    --accent-color-2: #231F20;   /* brand charcoal       */

    --sr-blue:        #F44902;
    --sr-blue-dark:   #C93A02;
    --sr-blue-soft:   #FFEDE4;   /* tint background      */
    --sr-orange:      #F44902;   /* brand orange (logo)  */
    --sr-orange-dark: #C93A02;
    --sr-orange-soft: #FFEDE4;
    --sr-teal:        #FF8A4C;   /* tertiary accent      */
    --sr-light-blue:  #F7B79A;
    --sr-ink:         #231F20;
    --sr-ink-2:       #404147;
    --sr-muted:       #6b7280;
    --sr-line:        #e5e7eb;
    --sr-bg:          #f4f7fa;
    --sr-card:        #ffffff;
    --sr-radius:      16px;
    --sr-shadow:      0 1px 3px rgba(16,24,40,.06), 0 12px 28px -12px rgba(16,24,40,.12);
    --sr-shadow-sm:   0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
}

/* ── Language flag switcher (topbar) ── */
.sr-lang { display: flex; align-items: center; gap: 6px; }
.sr-lang-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    padding: 4px 9px; cursor: pointer; color: #cfd4d8; font-weight: 700; font-size: 12.5px;
    letter-spacing: .03em; transition: .15s; line-height: 1;
}
.sr-lang-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.sr-lang-btn.active { background: var(--sr-orange); border-color: var(--sr-orange); color: #fff; }
.sr-flag {
    width: 21px; height: 14px; object-fit: cover; border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25); display: block; flex-shrink: 0;
}
.sr-lang-label { line-height: 1; }
.sr-lang .d-flex .sr-lang-btn { padding: 4px 6px; }

/* ── Text brand logo (nav + footer) ── */
.sr-brand-logo { display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.sr-brand-mark {
    width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
    background:linear-gradient(145deg,#F44902,#C93A02); color:#fff; font-size:19px;
    box-shadow:0 6px 14px -6px rgba(40,148,198,.7);
}
.sr-brand-text {
    font-family:'Bebas Neue',sans-serif; font-size:30px; line-height:.9; letter-spacing:.5px;
    color:#231F20; display:inline-flex; align-items:baseline; gap:3px;
}
.sr-brand-text span { color:var(--sr-orange); }
.sr-brand-text small { font-size:13px; color:#F44902; font-family:'DM Sans',sans-serif; font-weight:700; letter-spacing:0; margin-left:2px; }
.sr-brand-logo-light .sr-brand-text { color:#fff; }

/* Re-tint the home hero 3D box (was orange) via CSS filter fallback */
.bsd-big-box .bsd-box-svg polygon:nth-child(1) { fill: #FF8A4C !important; }
.bsd-big-box .bsd-box-svg polygon:nth-child(2) { fill: #C93A02 !important; }
.bsd-big-box .bsd-box-svg polygon:nth-child(3) { fill: #F44902 !important; }

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */
.sr-app {
    --sidebar-w: 264px;
    min-height: 100vh;
    background: var(--sr-bg);
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    color: var(--sr-ink);
}

/* Sidebar */
.sr-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--sr-ink);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .25s ease;
}
.sr-sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 22px 22px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sr-sidebar-brand img { height: 38px; width: auto; }
.sr-sidebar-brand .sr-logo-text {
    font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: .5px; color: #fff; line-height: 1;
}
.sr-sidebar-brand .sr-logo-text span { color: var(--sr-orange); }
.sr-role-chip {
    margin: 16px 22px 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: #64748b; font-weight: 600;
}
.sr-nav { list-style: none; margin: 0; padding: 4px 12px; flex: 1; overflow-y: auto; }
.sr-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; margin: 2px 0; border-radius: 10px;
    color: #cbd5e1; text-decoration: none; font-size: 14.5px; font-weight: 500;
    transition: background .15s, color .15s;
}
.sr-nav a i { width: 18px; text-align: center; font-size: 15px; opacity: .85; }
.sr-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sr-nav a.active { background: var(--sr-blue); color: #fff; box-shadow: 0 6px 16px -6px var(--sr-blue); }
.sr-nav a.active i { opacity: 1; }
.sr-nav .sr-badge-count {
    margin-left: auto; background: var(--sr-teal); color: #5a1e02;
    font-size: 11px; font-weight: 700; border-radius: 20px; padding: 1px 8px;
}
.sr-sidebar-foot { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,.08); }
.sr-sidebar-foot a { color: #94a3b8; text-decoration: none; font-size: 13.5px; display: flex; align-items: center; gap: 9px; }
.sr-sidebar-foot a:hover { color: #fff; }

/* Main column */
.sr-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.sr-topbar {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255,255,255,.85); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sr-line);
    display: flex; align-items: center; gap: 16px;
    padding: 14px 28px;
}
.sr-topbar h1 { font-size: 19px; font-weight: 700; margin: 0; color: var(--sr-ink); }
.sr-topbar .sr-sub { font-size: 13px; color: var(--sr-muted); margin: 0; }
.sr-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.sr-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--sr-blue); color: #fff; font-weight: 700;
    display: grid; place-items: center; font-size: 15px;
}
.sr-hamburger { display: none; background: none; border: 0; font-size: 20px; color: var(--sr-ink); }

.sr-content { padding: 28px; flex: 1; max-width: 1240px; width: 100%; }

/* ============================================================
   CARDS / STAT TILES
   ============================================================ */
.sr-card {
    background: var(--sr-card); border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius); box-shadow: var(--sr-shadow-sm);
}
.sr-card-pad { padding: 22px 24px; }
.sr-card-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid var(--sr-line);
}
.sr-card-head h3 { font-size: 16px; font-weight: 700; margin: 0; }

.sr-stat-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-bottom: 24px;
}
.sr-stat {
    background: var(--sr-card); border: 1px solid var(--sr-line);
    border-radius: var(--sr-radius); padding: 20px 22px;
    box-shadow: var(--sr-shadow-sm); position: relative; overflow: hidden;
}
.sr-stat::after {
    content: ''; position: absolute; right: -18px; top: -18px;
    width: 78px; height: 78px; border-radius: 50%;
    background: var(--sr-blue-soft);
}
.sr-stat-ico {
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center; font-size: 19px;
    background: var(--sr-blue-soft); color: var(--sr-blue);
    position: relative; z-index: 1; margin-bottom: 14px;
}
.sr-stat-ico.teal  { background: #fdeee2; color: #d97706; }
.sr-stat-ico.amber { background: #fef3e2; color: #d97706; }
.sr-stat-ico.green { background: #e6f6ec; color: #16a34a; }
.sr-stat-ico.gray  { background: #eef1f5; color: #475569; }
.sr-stat-val { font-size: 28px; font-weight: 800; line-height: 1; color: var(--sr-ink); position: relative; z-index: 1; }
.sr-stat-val small { font-size: 16px; font-weight: 700; color: var(--sr-muted); }
.sr-stat-lbl { font-size: 13px; color: var(--sr-muted); margin-top: 6px; font-weight: 500; position: relative; z-index: 1; }

/* ============================================================
   TABLES
   ============================================================ */
.sr-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sr-table th {
    text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sr-muted); font-weight: 700; padding: 12px 18px; border-bottom: 1px solid var(--sr-line);
}
.sr-table td { padding: 14px 18px; border-bottom: 1px solid var(--sr-line); vertical-align: middle; }
.sr-table tr:last-child td { border-bottom: 0; }
.sr-table tbody tr:hover { background: #fafcfe; }
.sr-table .sr-mono { font-variant-numeric: tabular-nums; font-weight: 600; }
.sr-table-wrap { overflow-x: auto; }

/* ============================================================
   BADGES / PILLS
   ============================================================ */
.sr-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 20px; white-space: nowrap;
}
.sr-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sr-badge.warning   { background: #fef3e2; color: #b45309; }
.sr-badge.info      { background: var(--sr-blue-soft); color: var(--sr-blue-dark); }
.sr-badge.success   { background: #e6f6ec; color: #15803d; }
.sr-badge.danger    { background: #fde8e8; color: #b91c1c; }
.sr-badge.secondary { background: #eef1f5; color: #475569; }
.sr-badge.dark      { background: #e2e8f0; color: #1e293b; }

/* ============================================================
   BUTTONS (dashboard scope)
   ============================================================ */
.sr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 10px;
    border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: all .15s; line-height: 1;
}
.sr-btn-primary { background: var(--sr-blue); color: #fff; }
.sr-btn-primary:hover { background: var(--sr-blue-dark); color: #fff; }
.sr-btn-ghost { background: #fff; color: var(--sr-ink); border-color: var(--sr-line); }
.sr-btn-ghost:hover { border-color: var(--sr-blue); color: var(--sr-blue); }
.sr-btn-success { background: #16a34a; color: #fff; }
.sr-btn-success:hover { background: #15803d; color: #fff; }
.sr-btn-danger { background: #fff; color: #b91c1c; border-color: #f3c8c8; }
.sr-btn-danger:hover { background: #b91c1c; color: #fff; }
.sr-btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 8px; }
.sr-btn-block { width: 100%; }

/* Forms */
.sr-field { margin-bottom: 16px; }
.sr-label { display: block; font-size: 13px; font-weight: 600; color: var(--sr-ink-2); margin-bottom: 6px; }
.sr-input, .sr-select, .sr-textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--sr-line); border-radius: 10px;
    font-size: 14px; font-family: inherit; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.sr-input:focus, .sr-select:focus, .sr-textarea:focus {
    outline: 0; border-color: var(--sr-blue); box-shadow: 0 0 0 3px var(--sr-blue-soft);
}
.sr-textarea { resize: vertical; min-height: 96px; }
.sr-help { font-size: 12.5px; color: var(--sr-muted); margin-top: 5px; }
.sr-error { font-size: 12.5px; color: #b91c1c; margin-top: 5px; }

/* Misc helpers */
.sr-flex { display: flex; align-items: center; }
.sr-gap-2 { gap: 8px; } .sr-gap-3 { gap: 14px; }
.sr-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sr-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sr-muted { color: var(--sr-muted); }
.sr-mb-0 { margin-bottom: 0; } .sr-mt-3 { margin-top: 14px; } .sr-mt-4 { margin-top: 22px; }
.sr-section-title { font-size: 15px; font-weight: 700; margin: 0 0 14px; }

.sr-alert {
    border-radius: 12px; padding: 13px 18px; font-size: 14px; font-weight: 500; margin-bottom: 20px;
    display: flex; align-items: center; gap: 10px;
}
.sr-alert.success { background: #e6f6ec; color: #15803d; border: 1px solid #bbe5c8; }
.sr-alert.error   { background: #fde8e8; color: #b91c1c; border: 1px solid #f3c8c8; }

.sr-empty { text-align: center; padding: 48px 20px; color: var(--sr-muted); }
.sr-empty i { font-size: 38px; color: var(--sr-line); display: block; margin-bottom: 14px; }

/* Copy field (referral link) */
.sr-copy {
    display: flex; align-items: center; gap: 0; border: 1px solid var(--sr-line);
    border-radius: 10px; overflow: hidden; background: #fff;
}
.sr-copy input { border: 0; flex: 1; padding: 11px 14px; font-size: 13.5px; color: var(--sr-ink-2); background: transparent; }
.sr-copy button { border: 0; background: var(--sr-blue); color: #fff; padding: 11px 18px; font-weight: 600; cursor: pointer; }
.sr-copy button:hover { background: var(--sr-blue-dark); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    .sr-sidebar { transform: translateX(-100%); }
    .sr-sidebar.open { transform: translateX(0); }
    .sr-main { margin-left: 0; }
    .sr-hamburger { display: block; }
    .sr-grid-2, .sr-grid-3 { grid-template-columns: 1fr; }
    .sr-content { padding: 18px; }
    .sr-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035; }
}