/*
 * Shifi Admin Shell GPT
 * Step 1 admin revamp: header, navigation, shell, footer and shared component polish.
 * Keep this file loaded after AdminBSB/all-themes.css.
 */
:root {
    --shifi-bg: #FAFAF8;
    --shifi-surface: #FFFFFF;
    --shifi-surface-soft: #F3F5F0;
    --shifi-green: #4F7564;
    --shifi-green-dark: #345847;
    --shifi-green-light: #DDEAE3;
    --shifi-saffron: #E89C2A;
    --shifi-ink: #1A1A18;
    --shifi-muted: #6F6F68;
    --shifi-border: #E3E5DD;
    --shifi-danger: #9D3D36;
    --shifi-shadow: 0 20px 60px rgba(31, 52, 43, .10);
    --shifi-shadow-soft: 0 10px 30px rgba(31, 52, 43, .08);
    --shifi-radius-lg: 28px;
    --shifi-radius-md: 18px;
    --shifi-sidebar-width: 304px;
    --shifi-navbar-height: 72px;
}

html, body {
    background: var(--shifi-bg) !important;
    color: var(--shifi-ink);
    font-family: Inter, Roboto, Arial, sans-serif !important;
    min-height: 100%;
}

body.theme-white,
body.theme-red,
body.theme-pink,
body.theme-purple,
body.theme-blue,
body.theme-green {
    background: radial-gradient(circle at top left, rgba(79,117,100,.11), transparent 32rem), var(--shifi-bg) !important;
}

a { color: var(--shifi-green); }
a:hover, a:focus { color: var(--shifi-green-dark); text-decoration: none; }

/* Top navbar */
.navbar.shifi-admin-navbar-gpt,
.theme-white .navbar,
.theme-green .navbar,
.theme-red .navbar,
.theme-pink .navbar,
.theme-blue .navbar {
    min-height: var(--shifi-navbar-height);
    height: var(--shifi-navbar-height);
    background: rgba(250, 250, 248, .94) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(227,229,221,.92) !important;
    box-shadow: 0 10px 34px rgba(31,52,43,.08) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--shifi-ink) !important;
    z-index: 1000;
}

.navbar .container-fluid { padding: 0 22px; }
.navbar-header.shifi-navbar-header-gpt { padding: 11px 0; display: flex; align-items: center; gap: 10px; }
.navbar-header .bars {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--shifi-green-dark) !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    background: var(--shifi-surface);
    border: 1px solid var(--shifi-border);
    box-shadow: 0 8px 22px rgba(31,52,43,.07);
}
.ls-closed .bars:before,
.overlay-open .bars:after { top: 9px !important; left: 9px !important; color: var(--shifi-green-dark) !important; }
.overlay-open .bars:before { top: 9px !important; left: 9px !important; }

.navbar .navbar-brand.shifi-admin-brand-gpt {
    height: 50px;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--shifi-ink) !important;
    line-height: 1.1;
}
.navbar .navbar-brand.shifi-admin-brand-gpt img {
    width: auto;
    height: 46px;
    max-width: 150px;
    object-fit: contain;
    border-radius: 10px;
}
.shifi-brand-copy-gpt { display: flex; flex-direction: column; min-width: 145px; }
.shifi-brand-copy-gpt strong { color: var(--shifi-green-dark); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.shifi-brand-copy-gpt small { color: var(--shifi-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.shifi-admin-top-actions-gpt { margin-right: 0; }
.shifi-admin-top-actions-gpt > li > a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 15px 0 0 8px !important;
    padding: 9px 12px !important;
    border-radius: 999px;
    color: var(--shifi-green-dark) !important;
    background: rgba(255,255,255,.78);
    border: 1px solid var(--shifi-border);
    font-weight: 700;
    line-height: 1;
}
.shifi-admin-top-actions-gpt > li > a:hover,
.shifi-admin-top-actions-gpt > li > a:focus {
    background: var(--shifi-green-dark) !important;
    color: #fff !important;
}
.shifi-admin-top-actions-gpt .material-icons { font-size: 19px; }

/* Sidebar */
.sidebar.shifi-admin-sidebar-gpt,
.sidebar {
    top: calc(var(--shifi-navbar-height) + 14px) !important;
    left: 16px !important;
    width: var(--shifi-sidebar-width) !important;
    height: calc(100vh - var(--shifi-navbar-height) - 28px) !important;
    background: rgba(255,255,255,.96) !important;
    border: 1px solid var(--shifi-border);
    border-radius: var(--shifi-radius-lg);
    box-shadow: var(--shifi-shadow);
    overflow: hidden;
}
.ls-closed .sidebar { margin-left: calc(-1 * var(--shifi-sidebar-width) - 40px) !important; }
.overlay-open .sidebar { margin-left: 0 !important; }

.user-info.shifi-admin-user-info-gpt,
.sidebar .user-info {
    height: auto !important;
    padding: 18px !important;
    background: linear-gradient(135deg, var(--shifi-green-dark), var(--shifi-green)) !important;
    border-radius: 0;
    color: #fff;
    display: flex;
    gap: 13px;
    align-items: center;
}
.sidebar .user-info .image { margin: 0 !important; }
.sidebar .user-info .image img {
    width: 54px !important;
    height: 54px !important;
    border-radius: 18px !important;
    border: 2px solid rgba(255,255,255,.75);
    object-fit: cover;
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.sidebar .user-info .info-container { top: auto !important; position: static !important; flex: 1; min-width: 0; }
.sidebar .user-info .info-container .name,
.sidebar .user-info .info-container .email {
    padding: 0 !important;
    color: #fff !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.sidebar .user-info .info-container .name { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.sidebar .user-info .info-container .email { font-size: 12px; opacity: .84; }
.shifi-admin-role-gpt { display: inline-block; margin-top: 7px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 11px; font-weight: 700; }

.shifi-admin-sidebar-search-gpt {
    margin: 14px 14px 10px;
    height: 44px;
    border: 1px solid var(--shifi-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--shifi-bg);
}
.shifi-admin-sidebar-search-gpt .material-icons { color: var(--shifi-muted); font-size: 20px; }
.shifi-admin-menu-search-gpt {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--shifi-ink);
    font-weight: 600;
}
.shifi-admin-menu-search-gpt::placeholder { color: #9C9B92; }

.shifi-admin-mission-gpt {
    margin: 0 14px 12px;
    padding: 13px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(232,156,42,.18), rgba(79,117,100,.10));
    border: 1px solid rgba(232,156,42,.20);
}
.shifi-admin-mission-gpt strong { display: block; color: var(--shifi-green-dark); font-size: 13px; margin-bottom: 4px; }
.shifi-admin-mission-gpt span { display: block; color: var(--shifi-muted); font-size: 11.5px; line-height: 1.35; }

.sidebar .menu { height: calc(100% - 232px) !important; }
.sidebar .menu .list { padding: 0 10px 12px !important; }
.sidebar .menu .list .header {
    margin: 16px 6px 6px;
    padding: 0 !important;
    background: transparent !important;
    color: #9B9B92 !important;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
}
.sidebar .menu .list li a {
    margin: 3px 0;
    padding: 11px 12px !important;
    border-radius: 15px;
    color: var(--shifi-ink) !important;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    font-weight: 700;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.sidebar .menu .list li a:hover { background: var(--shifi-surface-soft) !important; transform: translateX(2px); }
.sidebar .menu .list li.active > a,
.sidebar .menu .list li.active > a.toggled,
.sidebar .menu .list li.shifi-active-link-gpt > a {
    background: var(--shifi-green-dark) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(52,88,71,.18);
}
.sidebar .menu .list li a .material-icons,
.sidebar .menu .list .material-icons {
    width: 24px !important;
    min-width: 24px;
    margin-top: 0 !important;
    color: inherit !important;
    font-size: 21px !important;
}
.sidebar .menu .list a span { margin: 0 !important; white-space: normal; line-height: 1.22; }
.sidebar .menu .list .menu-toggle:after,
.sidebar .menu .list .menu-toggle:before {
    color: currentColor !important;
    right: 14px !important;
    top: calc(50% - 12px) !important;
}
.sidebar .menu .list .ml-menu {
    margin: 3px 0 8px 36px !important;
    padding: 4px 0 4px 8px !important;
    border-left: 1px dashed var(--shifi-border);
}
.sidebar .menu .list .ml-menu li a {
    padding: 9px 12px !important;
    min-height: 34px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--shifi-muted) !important;
    border-radius: 12px;
}
.sidebar .menu .list .ml-menu li.active a,
.sidebar .menu .list .ml-menu li.shifi-active-link-gpt a {
    background: var(--shifi-green-light) !important;
    color: var(--shifi-green-dark) !important;
    box-shadow: none;
}
.shifi-menu-badge-gpt,
.shifi-nav-tag-gpt {
    margin-left: auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(232,156,42,.18);
    color: var(--shifi-green-dark);
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .02em;
}
.shifi-logout-gpt a { color: var(--shifi-danger) !important; }
.shifi-logout-gpt a:hover { background: rgba(157,61,54,.10) !important; }
.sidebar .legal.shifi-admin-legal-gpt,
.sidebar .legal {
    height: auto !important;
    padding: 12px 16px 14px !important;
    border-top: 1px solid var(--shifi-border) !important;
    background: rgba(255,255,255,.88) !important;
    color: var(--shifi-muted) !important;
}
.sidebar .legal .copyright,
.sidebar .legal .version { font-size: 11px !important; line-height: 1.45; }
.sidebar .legal a { color: var(--shifi-green-dark) !important; font-weight: 800; }

/* Main content */
section.content {
    margin: calc(var(--shifi-navbar-height) + 24px) 24px 0 calc(var(--shifi-sidebar-width) + 40px) !important;
    min-height: calc(100vh - var(--shifi-navbar-height) - 24px);
}
.ls-closed section.content { margin-left: 24px !important; }
.block-header { margin-bottom: 18px !important; }
.block-header h2,
.block-header h1,
section.content h1,
section.content h2 {
    color: var(--shifi-green-dark) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
.block-header h2 small { color: var(--shifi-muted) !important; font-weight: 600; }

/* Cards, tables and forms */
.card {
    border: 1px solid var(--shifi-border) !important;
    border-radius: var(--shifi-radius-lg) !important;
    box-shadow: var(--shifi-shadow-soft) !important;
    background: rgba(255,255,255,.96) !important;
    overflow: hidden;
}
.card .header {
    border-bottom: 1px solid var(--shifi-border) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,250,248,.92));
    padding: 20px 24px !important;
}
.card .header h2,
.card .header h2 small { color: var(--shifi-ink) !important; }
.card .body { padding: 24px !important; }
.info-box,
.info-box-2,
.info-box-3,
.info-box-4,
.thumbnail,
.panel {
    border-radius: 22px !important;
    border: 1px solid var(--shifi-border) !important;
    box-shadow: var(--shifi-shadow-soft) !important;
    overflow: hidden;
}
.table-responsive { border-radius: 18px; }
.table > thead > tr > th {
    border-bottom: 1px solid var(--shifi-border) !important;
    color: var(--shifi-green-dark);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    border-color: #EEF0EA !important;
    vertical-align: middle !important;
}
.table > tbody > tr:hover { background: rgba(79,117,100,.045); }
.form-control,
.bootstrap-select .dropdown-toggle,
textarea,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"] {
    border-radius: 14px !important;
    border-color: var(--shifi-border) !important;
    box-shadow: none !important;
}
.form-line:after { border-bottom-color: var(--shifi-green) !important; }
label { color: var(--shifi-green-dark); font-weight: 700; }
.btn,
button,
input[type="submit"] { border-radius: 14px !important; font-weight: 800 !important; text-transform: none !important; }
.btn-primary,
.bg-pink,
.bg-red,
.bg-green,
.btn-success {
    background: var(--shifi-green) !important;
    color: #fff !important;
    border-color: var(--shifi-green) !important;
}
.btn-warning,
.bg-orange,
.bg-amber { background: var(--shifi-saffron) !important; color: var(--shifi-ink) !important; border-color: var(--shifi-saffron) !important; }
.btn-danger { background: var(--shifi-danger) !important; border-color: var(--shifi-danger) !important; }
.alert { border-radius: 16px !important; border: 0 !important; }
.alert-success { background: #E8F3ED !important; color: var(--shifi-green-dark) !important; }
.alert-danger { background: #FBEAE8 !important; color: var(--shifi-danger) !important; }

/* Search overlay */
.search-bar.shifi-search-bar-gpt {
    background: rgba(250,250,248,.98) !important;
    border-bottom: 1px solid var(--shifi-border);
}
.search-bar.shifi-search-bar-gpt input[type="text"] {
    color: var(--shifi-ink) !important;
    font-size: 20px !important;
    font-weight: 700;
}
.search-bar .search-icon .material-icons,
.search-bar .close-search .material-icons { color: var(--shifi-green-dark) !important; }

/* Login */
.login-page {
    background: radial-gradient(circle at 18% 15%, rgba(232,156,42,.22), transparent 24rem), radial-gradient(circle at 80% 0%, rgba(79,117,100,.20), transparent 28rem), var(--shifi-bg) !important;
}
.login-box { margin-top: 8vh !important; }
.login-box .logo a { color: var(--shifi-green-dark) !important; font-weight: 800; }
.login-box .logo small { color: var(--shifi-muted) !important; font-weight: 700; }
.login-box .card { border-radius: 30px !important; }
.login-box .msg { color: var(--shifi-muted); font-weight: 700; }

/* Footer */
.shifi-admin-footer-note-gpt {
    margin: 24px 0 0;
    padding: 14px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.70);
    border: 1px solid var(--shifi-border);
    color: var(--shifi-muted);
    font-size: 12px;
}

/* Menu filter states */
.shifi-admin-menu-filter-empty-gpt {
    padding: 14px 18px;
    margin: 8px 14px;
    border-radius: 16px;
    background: var(--shifi-surface-soft);
    color: var(--shifi-muted);
    font-weight: 700;
    display: none;
}
.shifi-filtering-gpt .shifi-admin-menu-filter-empty-gpt { display: block; }

@media (max-width: 1170px) {
    .sidebar.shifi-admin-sidebar-gpt,
    .sidebar { left: 0 !important; top: var(--shifi-navbar-height) !important; height: calc(100vh - var(--shifi-navbar-height)) !important; border-radius: 0 28px 28px 0; }
    section.content { margin-left: 18px !important; margin-right: 18px !important; }
    .shifi-admin-top-actions-gpt > li > a span { display: none; }
}
@media (max-width: 767px) {
    .navbar .container-fluid { padding: 0 12px; }
    .shifi-brand-copy-gpt small { display: none; }
    .shifi-brand-copy-gpt { min-width: 70px; }
    .navbar .navbar-brand.shifi-admin-brand-gpt img { height: 38px; }
    .shifi-admin-top-actions-gpt { display: none; }
    section.content { margin-top: calc(var(--shifi-navbar-height) + 16px) !important; }
    .card .body { padding: 18px !important; }
}

/* Step 1.1 shell fixes */
.navbar-header .navbar-toggle.collapsed,
.navbar-header .navbar-toggle {
    display: none !important;
}
.sidebar.shifi-admin-sidebar-gpt,
.sidebar {
    display: flex !important;
    flex-direction: column !important;
}
.sidebar .menu {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
.sidebar .legal.shifi-admin-legal-gpt,
.sidebar .legal {
    position: static !important;
    flex: 0 0 auto !important;
}
.sidebar .menu::-webkit-scrollbar { width: 8px; }
.sidebar .menu::-webkit-scrollbar-track { background: transparent; }
.sidebar .menu::-webkit-scrollbar-thumb { background: rgba(79,117,100,.22); border-radius: 999px; }
@media (max-width: 767px) {
    .navbar-header .navbar-toggle.collapsed,
    .navbar-header .navbar-toggle { display: none !important; }
}