/* ============================================================
   core-look.css — makes nexus look EXACTLY like the core (Shronix
   Nidhi Pro) "shronixbill" theme: navy sidebar + cyan accent,
   3D EMBOSSED icons, premium cards & buttons, DM Sans, tinted body.
   Pure CSS overlay (loaded LAST in welcome.blade). No JS/markup/API
   changes — remove the <link> or restore backup to revert.
   Recipes copied 1:1 from core's premium-ui.css + embossed-icons.css.
   ============================================================ */

:root {
    --sidebar-bg: #0F2B46;
    --sidebar-dark: #091E33;
    --sidebar-active: #00B4D8;
    --sidebar-text: rgba(255,255,255,0.72);
    --accent: #00B4D8;
    --accent-dark: #0077B6;
    --accent-light: #E0F7FA;
    --accent-rgb: 0,180,216;
    --body-bg: #F5F7FA;
    --card-bg: #FFFFFF;
    --card-radius: 14px;
    --border-color: #E8ECF0;
    --text-primary: #1A1A2E;
    --text-secondary: #64748B;

    /* override nexus brand vars too */
    --theme-primary: #00B4D8;
    --theme-secondary: #0077B6;
    --theme-btn-border: #0077B6;
    --theme-light: #E0F7FA;
    --primary: #00B4D8;
    --primary-light: rgba(0,180,216,0.12);
    --link: #0077B6;
    --table-head: #E0F7FA;
}

/* ---- font everywhere ---- */
body, .wraper-main, .navbar, .card, .content, #main,
input, select, textarea, button, .btn, table, h1, h2, h3, h4, h5, h6 {
    font-family: 'DM Sans', 'Segoe UI', sans-serif !important;
}

/* ---- body: theme-tinted gradient (embossed feel) ---- */
body, .wraper-main {
    background: linear-gradient(180deg, var(--accent-light) 0%, var(--body-bg) 320px) !important;
    background-attachment: fixed !important;
    color: var(--text-primary);
}

/* ---- sidebar: dark navy ---- */
.sidebar, .sidebar .sidebar-inner {
    background: linear-gradient(180deg, #0F2B46 0%, #091E33 100%) !important;
}
.sidebar .sidebar-inner a {
    color: var(--sidebar-text) !important;
    border-radius: 10px !important;
}
.sidebar .sidebar-inner a:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #ffffff !important;
}
.sidebar .sidebar-inner a.active {
    background: rgba(255,255,255,0.05) !important;
    color: #ffffff !important;
}
.sidebar .sidebar-inner h1, .sidebar .sidebar-inner h2, .sidebar .sidebar-inner h3,
.sidebar .sidebar-inner h4, .sidebar .sidebar-inner h5, .sidebar .sidebar-inner h6,
.sidebar .sidebar-inner p, .sidebar .sidebar-inner span, .sidebar .sidebar-inner small,
.sidebar .sidebar-inner label {
    color: rgba(255,255,255,0.85) !important;
}
.sidebar-inner::-webkit-scrollbar-thumb { background: rgba(0,180,216,0.4) !important; }
.sidebar-inner::-webkit-scrollbar-thumb:hover { background: rgba(0,180,216,0.7) !important; }

/* ---- 3D EMBOSSED sidebar icons (the core signature) ---- */
.sidebar .sidebar-inner a i {
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    border-radius: 9px !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(0,0,0,0.30)) !important;
    color: var(--accent) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,0.18),
        inset -1px -1px 2px rgba(0,0,0,0.45),
        2px 2px 4px rgba(0,0,0,0.35),
        0 0 0 0.5px rgba(var(--accent-rgb), 0.25) !important;
    transition: all 0.25s ease !important;
    flex-shrink: 0 !important;
}
.sidebar .sidebar-inner a:hover i {
    transform: translateY(-1px);
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,0.25),
        inset -1px -1px 2px rgba(0,0,0,0.5),
        3px 3px 6px rgba(0,0,0,0.45),
        0 0 0 0.5px rgba(var(--accent-rgb), 0.5) !important;
}
.sidebar .sidebar-inner a.active i {
    background: linear-gradient(145deg, var(--accent), var(--accent-dark)) !important;
    color: #ffffff !important;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,0.45),
        inset -1px -1px 2px rgba(0,0,0,0.30),
        2px 2px 5px rgba(0,0,0,0.4),
        0 0 0 0.5px rgba(var(--accent-rgb), 0.6),
        0 0 8px rgba(var(--accent-rgb), 0.35) !important;
    transform: translateY(-1px);
}

/* ---- top navbar: white + soft shadow ---- */
.navbar {
    background: #FFFFFF !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* ---- premium cards ---- */
.card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--card-radius) !important;
    box-shadow:
        0 1px 3px rgba(0,0,0,0.04),
        0 4px 12px rgba(var(--accent-rgb), 0.04) !important;
    transition: box-shadow 0.3s ease !important;
}
.card:hover {
    box-shadow:
        0 2px 6px rgba(0,0,0,0.06),
        0 12px 24px rgba(var(--accent-rgb), 0.08) !important;
}
.card-header {
    background: linear-gradient(135deg, var(--accent-light), var(--card-bg)) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    border-top-left-radius: var(--card-radius) !important;
    border-top-right-radius: var(--card-radius) !important;
}

/* ---- 3D gradient buttons ---- */
.btn-theme, .btn-primary {
    background: linear-gradient(145deg, var(--accent), var(--accent-dark)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 11px !important;
    font-weight: 600 !important;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,0.3),
        inset -1px -1px 2px rgba(0,0,0,0.15),
        0 4px 10px rgba(var(--accent-rgb), 0.35) !important;
    transition: all 0.25s ease !important;
}
.btn-theme:hover, .btn-primary:hover {
    transform: translateY(-2px) !important;
    color: #fff !important;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,0.4),
        0 7px 16px rgba(var(--accent-rgb), 0.5) !important;
}
.btn-outline-theme, .btn-outline-primary {
    background: var(--card-bg) !important;
    color: var(--accent-dark) !important;
    border: 1.5px solid var(--accent) !important;
    border-radius: 11px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.12) !important;
}
.btn-outline-theme:hover, .btn-outline-primary:hover {
    background: linear-gradient(145deg, var(--accent), var(--accent-dark)) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
}
.btn-success {
    background: linear-gradient(145deg, #10b981, #059669) !important;
    border: none !important; color: #fff !important;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), 0 3px 8px rgba(16,185,129,0.4) !important;
}
.btn-danger {
    background: linear-gradient(145deg, #ef4444, #dc2626) !important;
    border: none !important; color: #fff !important;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), 0 3px 8px rgba(239,68,68,0.4) !important;
}
.btn-sm { border-radius: 9px !important; }

/* ---- tables ---- */
.table thead th, .table-head, thead.table-head th {
    background: var(--accent-light) !important;
    color: #0F2B46 !important;
    border-color: var(--border-color) !important;
    font-weight: 600 !important;
}

/* ---- links ---- */
a, .link { color: var(--accent-dark); }
a:hover { color: var(--accent); }

/* ============ HEADER / top navbar (white topnav, dark text — core) ============ */
.navbar.main-header, .navbar { background: #FFFFFF !important; }
/* brand text + all header links/icons -> navy, hover cyan */
.navbar .navbar-brand span,
.navbar .nav-right .nav-link, .navbar .nav-right a,
.navbar .nav-link, .navbar .nav-li > a {
    color: #0F2B46 !important;
}
.navbar .nav-right .nav-link:hover, .navbar .nav-link:hover,
.navbar .nav-li > a:hover { color: var(--accent) !important; }
/* brand SVG logo: white -> navy, keep one accent bar cyan */
.navbar-brand svg rect { fill: #0F2B46 !important; }
.navbar-brand svg rect[fill="#a7f3d0"] { fill: #00B4D8 !important; }
.navbar-brand svg path { stroke: #0F2B46 !important; }
/* subtitle a touch muted */
.navbar-brand div span:last-child { color: #64748B !important; }

/* ============ PILL TABS + TAB PANEL + TABLES (core look) ============ */
/* page heading */
.title-heading .page-title, .page-title { color: #0F2B46 !important; font-weight: 700 !important; }

/* pill tabs (Vendors / Signup Requests / Vendor Agreements) */
.nav-pills .nav-link {
    color: var(--text-secondary) !important;
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    margin-right: 6px !important;
    transition: all 0.2s ease !important;
}
.nav-pills .nav-link:hover { color: var(--accent-dark) !important; border-color: var(--accent) !important; }
.nav-pills .nav-link.active {
    background: linear-gradient(145deg, var(--accent), var(--accent-dark)) !important;
    color: #ffffff !important;
    border-color: var(--accent-dark) !important;
    box-shadow: 0 4px 10px rgba(var(--accent-rgb), 0.3) !important;
}

/* tab content -> distinct white card panel (different from the tab bar above) */
.bg-white-tabs {
    background: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    margin-top: 10px !important;
}

/* tables -> keep the ORIGINAL look (no full cell borders); just themed header + hover */
.table th, .table td { vertical-align: middle !important; }
.table thead th {
    background: var(--accent-light) !important;
    color: #0F2B46 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}
.table tbody tr:hover { background: rgba(0,180,216,0.05) !important; }
.table-link { color: var(--accent-dark) !important; font-weight: 600 !important; }

/* ============ HEADER ICONS — 3D embossed (light, for white topnav) ============ */
.navbar .nav-right .nav-link > i,
.navbar .nav-right > li > a > i {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    background: linear-gradient(145deg, #ffffff, #E0F7FA) !important;
    color: var(--accent-dark) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,0.9),
        inset -1px -1px 2px rgba(0,0,0,0.06),
        2px 2px 5px rgba(0,180,216,0.18) !important;
    transition: all 0.25s ease !important;
}
.navbar .nav-right .nav-link:hover > i,
.navbar .nav-right > li > a:hover > i {
    transform: translateY(-2px);
    color: var(--accent) !important;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,1),
        inset -1px -1px 2px rgba(0,0,0,0.10),
        3px 3px 8px rgba(0,180,216,0.32) !important;
}
/* open dropdown / active -> cyan gradient (like sidebar active) */
.navbar .nav-right .show > .nav-link > i,
.navbar .nav-right .nav-link.active > i {
    background: linear-gradient(145deg, var(--accent), var(--accent-dark)) !important;
    color: #ffffff !important;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,0.4),
        inset -1px -1px 2px rgba(0,0,0,0.2),
        0 4px 10px rgba(0,180,216,0.4) !important;
}
/* keep dropdown-menu item icons normal (NOT boxed) */
.navbar .dropdown-menu .dropdown-item > i {
    width: auto !important; height: auto !important; background: none !important;
    box-shadow: none !important; border-radius: 0 !important;
}