/* ===== SDC Central — Modern HDW Theme ===== */

:root {
    --orange: #f96302;
    --orange-hover: #e05800;
    --orange-light: rgba(249, 99, 2, 0.06);
    --green: #00ae4d;
    --red: #ed1c24;
    --yellow: #ffc20e;
    --blue: #286fad;
    --purple: #7b61ff;
    --header-bg: #1e2328;
    --page-bg: #f0f2f5;
    --card-bg: #ffffff;
    --text-primary: #1a1a2e;
    --text-body: #4a4a5a;
    --text-secondary: #8a8a9a;
    --border: #e0e0e8;
    --border-light: #eaeaf0;
    --row-alt: #f8f8fb;
    --row-hover: #f0f0f5;
    --font: 'Open Sans', sans-serif;
    --header-h: 56px;
    --footer-h: 32px;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    --shadow-hover: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    --transition: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; overflow: hidden; }

body {
    font-family: var(--font);
    font-size: 14px;
    color: var(--text-body);
    background: var(--page-bg);
}

/* ===== DOT BACKGROUND ===== */
.dot-bg {
    background-image: radial-gradient(circle, #d0d0d8 0.7px, transparent 0.7px);
    background-size: 22px 22px;
}
.dark .dot-bg {
    background-image: radial-gradient(circle, rgba(255,255,255,0.035) 0.7px, transparent 0.7px);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4c4cc; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #aaa; }
.dark ::-webkit-scrollbar-thumb { background: #444; }

/* ===== ANIMATIONS ===== */
.fade-in { animation: fadeIn 300ms ease-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Jiggle / wiggle for edit mode (iOS home screen style) */
@keyframes jiggle {
    0%   { transform: rotate(-0.7deg); }
    25%  { transform: rotate(0.7deg); }
    50%  { transform: rotate(-0.7deg); }
    75%  { transform: rotate(0.7deg); }
    100% { transform: rotate(-0.7deg); }
}
.jiggle {
    animation: jiggle 0.25s ease-in-out infinite;
}

/* ===== CARDS ===== */
.card-modern {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card-modern:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
    border-color: transparent;
}
.dark .card-modern {
    background: #2b3038;
    border-color: #3a3f47;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.dark .card-modern:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    border-color: transparent;
}

/* ===== SIDEBAR ===== */
.sidebar-transition { transition: width 220ms ease; }
.sidebar-modern {
    background: #ffffff;
    border-right: 1px solid var(--border-light);
}
.dark .sidebar-modern {
    background: #1e2228;
    border-right-color: #2e333a;
}
.sidebar-item {
    border-radius: 8px;
    margin: 2px 10px;
    padding: 8px 10px;
    transition: all 150ms ease;
    border: none;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
}
.sidebar-item:hover {
    background: #f0f0f5;
}
.dark .sidebar-item:hover {
    background: #2a2f36;
}
.sidebar-item.active {
    background: rgba(249, 99, 2, 0.08) !important;
    color: var(--orange) !important;
    font-weight: 600;
}
.dark .sidebar-item.active {
    background: rgba(249, 99, 2, 0.12) !important;
}

/* ===== SEARCH ===== */
.header-modern {
    background: #1e2328;
    color: #ffffff;
}

.footer-modern {
    background: #1e2328;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    letter-spacing: 0.3px;
}

.search-modern {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    transition: all 200ms ease;
}
.search-modern:focus-within {
    background: rgba(255,255,255,0.12);
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(249,99,2,0.15);
}

/* ===== TOOL CHIP ===== */
.tool-chip {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    box-shadow: var(--shadow-card);
    transition: all var(--transition);
    cursor: pointer;
}
.tool-chip:hover {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(249,99,2,0.08);
    transform: translateY(-1px);
}
.dark .tool-chip {
    background: #2b3038;
    border-color: #3a3f47;
}
.dark .tool-chip:hover {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(249,99,2,0.15);
}

/* ===== HERO ===== */
.hero-gradient {
    background: linear-gradient(135deg, rgba(249,99,2,0.04) 0%, rgba(40,111,173,0.03) 50%, rgba(123,97,255,0.03) 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}
.dark .hero-gradient {
    background: linear-gradient(135deg, rgba(249,99,2,0.06) 0%, rgba(40,111,173,0.04) 50%, rgba(123,97,255,0.04) 100%);
    border-color: #3a3f47;
}

/* ===== SECTION LABEL ===== */
.section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}
.dark .section-label { color: #6b7280; }
.dark .section-label::after { background: #2e333a; }

/* ===== BREADCRUMB ===== */
.breadcrumb-modern {
    background: #ffffff;
    border-bottom: 1px solid var(--border-light);
}
.dark .breadcrumb-modern {
    background: #1e2228;
    border-bottom-color: #2e333a;
}

/* ===== TAB BUTTON ===== */
.tab-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    transition: all 150ms ease;
    white-space: nowrap;
}
.tab-btn.active {
    background: rgba(255,255,255,0.15);
    color: white;
}
.tab-btn:not(.active) {
    color: rgba(255,255,255,0.45);
}
.tab-btn:not(.active):hover {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.05);
}

/* ===== SPINNER ===== */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 0.7s linear infinite; }

/* ===== IFRAME ===== */
.app-frame { border: none; width: 100%; height: 100%; }

/* ===== DARK MODE ===== */
.dark body, body.dark {
    background: #13161a;
    color: #e4e4e7;
}