/* ==========================================================================
   Project SECURITY — GH-SocialSuite visual theme
   Reskins AdminLTE/Bootstrap without touching markup or functionality.
   Loaded after adminlte.min.css / bootstrap / psec.css on every page.
   ========================================================================== */

:root {
    --gh-bg: #FDF7EC;
    --gh-sidebar-bg: #FFFCF6;
    --gh-card-bg: #FFFFFF;
    --gh-border: #F0E6D6;
    --gh-orange: #F0791A;
    --gh-orange-dark: #D9660A;
    --gh-orange-soft-bg: #FCE9D8;
    --gh-green: #1FA153;
    --gh-green-soft-bg: #DEF3E4;
    --gh-blue: #5B6EF5;
    --gh-blue-soft-bg: #E7ECFC;
    --gh-red: #E4483A;
    --gh-red-soft-bg: #FBE4E1;
    --gh-text: #211D17;
    --gh-text-muted: #8A8578;
    --gh-radius-lg: 20px;
    --gh-radius-md: 14px;
    --gh-radius-sm: 10px;
    --gh-shadow: 0 2px 14px rgba(60, 40, 10, 0.06);
}

body, .wrapper, .content-wrapper {
    background-color: var(--gh-bg) !important;
    color: var(--gh-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------------------------------------------------------------------
   Login page (index.php) background
   ------------------------------------------------------------------- */
.login-page {
    background-color: var(--gh-bg) !important;
}

/* ---------------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------------- */
.main-sidebar, .sidebar-dark-primary {
    background-color: #1b1b1e !important;
    border-right: 1px solid #2a2a2e;
}

/* Brand / logo — plain white wordmark, left aligned */
.sidebar-dark-primary .brand-link:not([class*=navbar]),
.layout-navbar-fixed .wrapper .sidebar-dark-primary .brand-link:not([class*=navbar]) {
    background-color: #1b1b1e !important;
    border-bottom: 1px solid #2a2a2e;
    text-align: left;
    padding-left: 20px;
}
.sidebar-dark-primary .brand-link + .sidebar,
.sidebar-dark-primary .brand-link {
    text-align: left;
}

.brand-link .brand-text,
.brand-link {
    color: #ffffff !important;
}

.brand-image,
.brand-link .brand-text {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
}

/* Account / Logout buttons -> outlined dark pills like the reference button */
.sidebar-dark-primary .user-panel {
    border-bottom: 1px solid #2a2a2e;
    padding-bottom: 14px;
}

.sidebar-dark-primary .user-panel .btn,
.sidebar-dark-primary .user-panel a.btn {
    background-color: transparent !important;
    border: 1px solid #3a3a40 !important;
    color: #d7d7db !important;
    border-radius: 10px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.sidebar-dark-primary .user-panel .btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-color: #4a4a52 !important;
}

/* Nav links */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link,
.sidebar-dark-primary .nav-sidebar .nav-link {
    color: #c7c7cd !important;
    border-radius: 10px;
    margin: 2px 10px;
    width: auto;
    padding: 10px 14px;
    font-weight: 500;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link p,
.sidebar-dark-primary .nav-sidebar .nav-link p {
    color: #c7c7cd !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link i,
.sidebar-dark-primary .nav-sidebar .nav-link i {
    color: #9a9aa2 !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-dark-primary .nav-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover i,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover p {
    color: #ffffff !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar .nav-link.active {
    background-color: rgba(240, 121, 26, 0.15) !important;
    color: #F0791A !important;
    box-shadow: inset 3px 0 0 #F0791A !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active i,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active p {
    color: #F0791A !important;
}

/* Treeview sub-menus */
.sidebar-dark-primary .nav-sidebar .nav-treeview {
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    margin: 0 10px 4px;
}
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: #a9a9b0 !important;
}
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link i {
    color: #8a8a92 !important;
}
.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

/* Section headers */
.nav-sidebar .nav-header {
    color: #6e6e77 !important;
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
}

/* User panel text */
.sidebar-dark-primary .user-panel a,
.sidebar-dark-primary .user-panel .info,
.sidebar-dark-primary .user-panel .info a {
    color: #d7d7db !important;
}

/* ---------------------------------------------------------------------
   Top navbar
   ------------------------------------------------------------------- */
.navbar-dark, .layout-navbar-fixed .navbar-dark, .dark-mode .navbar-dark {
    background-color: var(--gh-bg) !important;
    border-bottom: 1px solid var(--gh-border);
}

.navbar-dark .nav-link,
.navbar-white .nav-link {
    color: var(--gh-text) !important;
}

.navbar .nav-item > .nav-link,
.navbar-dark .btn,
.navbar .dropdown-toggle {
    background-color: #FFFFFF;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
}

.navbar .nav-item > .nav-link:hover {
    background-color: var(--gh-orange-soft-bg);
}

/* ---------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------- */
.card {
    background-color: var(--gh-card-bg);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-lg) !important;
    box-shadow: var(--gh-shadow);
}

.card.card-outline {
    border-top: 1px solid var(--gh-border) !important;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--gh-border);
    border-top-left-radius: var(--gh-radius-lg) !important;
    border-top-right-radius: var(--gh-radius-lg) !important;
    padding: 18px 22px;
}

.card-title {
    color: var(--gh-text);
    font-weight: 700;
}

.card-body {
    padding: 20px 22px;
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--gh-border);
    border-bottom-left-radius: var(--gh-radius-lg) !important;
    border-bottom-right-radius: var(--gh-radius-lg) !important;
}

/* Muted stat sub-cards (e.g. protection-module summary tiles) */
.card.bg-light, .card-body.bg-light {
    background-color: #FFFFFF !important;
    border: 1px solid var(--gh-border) !important;
    border-radius: var(--gh-radius-md) !important;
}

/* ---------------------------------------------------------------------
   Content header intro banner (page title + breadcrumb area)
   ------------------------------------------------------------------- */
.content-header {
    background: linear-gradient(135deg, #FCEEDD 0%, #FDF7EC 65%);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-lg);
    margin: 0 0 22px 0;
    padding: 22px 26px !important;
}

.content-header h1 {
    color: var(--gh-text);
    font-weight: 800;
}

.content-header .breadcrumb {
    background: transparent;
}

.content-header .breadcrumb-item a {
    color: var(--gh-text-muted);
}

.content-header .breadcrumb-item.active {
    color: var(--gh-text);
}

/* ---------------------------------------------------------------------
   Stat widgets — small-box / info-box (dashboard, chart summaries)
   ------------------------------------------------------------------- */
.small-box, .info-box {
    background-color: var(--gh-card-bg) !important;
    color: var(--gh-text) !important;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-lg) !important;
    box-shadow: var(--gh-shadow);
}

.small-box.bg-info, .small-box.bg-success, .small-box.bg-warning,
.small-box.bg-danger, .small-box.bg-dark, .small-box.bg-primary,
.small-box.bg-secondary {
    background-color: var(--gh-card-bg) !important;
    color: var(--gh-text) !important;
}

.small-box h3, .small-box p, .info-box-text, .info-box-number {
    color: var(--gh-text) !important;
}

.small-box .icon {
    color: var(--gh-orange) !important;
    opacity: 1;
    top: 18px;
    right: 18px;
    background-color: var(--gh-orange-soft-bg);
    border-radius: 999px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px !important;
}

.small-box.bg-success .icon { background-color: var(--gh-green-soft-bg); color: var(--gh-green) !important; }
.small-box.bg-danger  .icon { background-color: var(--gh-red-soft-bg);   color: var(--gh-red) !important; }
.small-box.bg-warning .icon { background-color: var(--gh-orange-soft-bg);color: var(--gh-orange) !important; }
.small-box.bg-info    .icon,
.small-box.bg-primary .icon { background-color: var(--gh-blue-soft-bg); color: var(--gh-blue) !important; }

.small-box-footer {
    background-color: transparent !important;
    color: var(--gh-text-muted) !important;
    border-top: 1px solid var(--gh-border) !important;
    border-bottom-left-radius: var(--gh-radius-lg) !important;
    border-bottom-right-radius: var(--gh-radius-lg) !important;
}

.info-box-icon {
    border-top-left-radius: var(--gh-radius-lg) !important;
    border-bottom-left-radius: var(--gh-radius-lg) !important;
    background-color: var(--gh-orange-soft-bg) !important;
    color: var(--gh-orange) !important;
}

/* ---------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */
.btn {
    border-radius: 999px;
    font-weight: 600;
}

.btn.btn-flat, table .btn {
    border-radius: var(--gh-radius-sm);
}

.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info {
    background-color: var(--gh-orange) !important;
    border-color: var(--gh-orange) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover, .btn-success:hover, .btn-danger:hover,
.btn-warning:hover, .btn-info:hover {
    background-color: var(--gh-orange-dark) !important;
    border-color: var(--gh-orange-dark) !important;
}

.btn-secondary, .btn-default, .btn-outline-secondary {
    background-color: #FFFFFF !important;
    border-color: var(--gh-border) !important;
    color: var(--gh-text) !important;
}

.btn-secondary:hover, .btn-default:hover {
    background-color: var(--gh-orange-soft-bg) !important;
}

/* Destructive actions keep a visually distinct red, but still on-brand */
a.btn-danger, button.btn-danger, .btn-danger {
    background-color: var(--gh-red) !important;
    border-color: var(--gh-red) !important;
}

/* ---------------------------------------------------------------------
   Badges / pills
   ------------------------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: 5px 12px;
}

.badge-primary, .badge-info { background-color: var(--gh-blue-soft-bg) !important; color: var(--gh-blue) !important; }
.badge-success               { background-color: var(--gh-green-soft-bg) !important; color: var(--gh-green) !important; }
.badge-danger                { background-color: var(--gh-red-soft-bg) !important; color: var(--gh-red) !important; }
.badge-warning               { background-color: var(--gh-orange-soft-bg) !important; color: var(--gh-orange-dark) !important; }
.badge-secondary             { background-color: #F1EEE7 !important; color: var(--gh-text-muted) !important; }

/* ---------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------- */
.table {
    color: var(--gh-text);
}

.table thead th {
    border-bottom: 1px solid var(--gh-border);
    color: var(--gh-text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
}

.table td, .table th {
    border-top: 1px solid var(--gh-border);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: var(--gh-orange-soft-bg);
}

/* ---------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------- */
.form-control, .custom-select, select.form-control {
    background-color: #FFFFFF;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    color: var(--gh-text);
}

.form-control:focus {
    border-color: var(--gh-orange);
    box-shadow: 0 0 0 3px var(--gh-orange-soft-bg);
}

.input-group-text, .input-group-append .btn {
    background-color: #FFFFFF;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
}

/* ---------------------------------------------------------------------
   Alerts / callouts
   ------------------------------------------------------------------- */
.alert, .callout {
    border-radius: var(--gh-radius-md);
    border-width: 1px;
}

.alert-info, .callout-info       { background-color: var(--gh-blue-soft-bg);   color: var(--gh-blue); border-color: var(--gh-blue-soft-bg); }
.alert-success, .callout-success { background-color: var(--gh-green-soft-bg);  color: var(--gh-green); border-color: var(--gh-green-soft-bg); }
.alert-danger, .callout-danger   { background-color: var(--gh-red-soft-bg);    color: var(--gh-red); border-color: var(--gh-red-soft-bg); }
.alert-warning, .callout-warning { background-color: var(--gh-orange-soft-bg); color: var(--gh-orange-dark); border-color: var(--gh-orange-soft-bg); }

/* ---------------------------------------------------------------------
   Misc AdminLTE elements
   ------------------------------------------------------------------- */
.dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow);
}

.dropdown-item:hover {
    background-color: var(--gh-orange-soft-bg);
}

.modal-content {
    background-color: var(--gh-card-bg);
    border-radius: var(--gh-radius-lg);
    border: 1px solid var(--gh-border);
}

.nav-tabs .nav-link.active {
    color: var(--gh-orange-dark);
    border-color: var(--gh-border) var(--gh-border) #FFFFFF;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background-color: #E8DCC7; border-radius: 999px; }
::-webkit-scrollbar-track { background-color: var(--gh-bg); }