/*
 * Fair E Web Host / FairPanel
 * Reusable UI Components — v10
 *
 * Loaded after fwh-portal-v10.css.
 * Feature-specific CSS may load after this file.
 */


/* ============================================================
   PAGE SURFACE
   ============================================================ */

body.fwh-shell {
    background:
        linear-gradient(
            180deg,
            #f7fafc 0,
            #f3f7fa 280px,
            #f4f7f9 100%
        );
}

body.fwh-shell .fwh-content {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
}

body.fwh-shell .fwh-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

body.fwh-shell .fwh-page-title {
    margin: 5px 0 6px;
    font-size: clamp(1.65rem, 2vw, 2.25rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.035em;
    color: #0b2f4a;
}

body.fwh-shell .fwh-page-subtitle {
    margin: 0;
    max-width: 760px;
    color: #617082;
    font-size: .96rem;
    line-height: 1.65;
}

body.fwh-shell .fwh-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #78889a;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
}


/* ============================================================
   TOP BAR
   ============================================================ */

body.fwh-shell .fwh-topbar {
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e1e9ef;
    box-shadow:
        0 1px 2px rgba(15,23,42,.02),
        0 8px 30px rgba(15,23,42,.035);
    backdrop-filter: blur(16px);
}

body.fwh-shell .fwh-brand-link {
    color: #0b2f4a;
}

body.fwh-shell .fwh-brand-context {
    color: #66788a;
    font-size: .72rem;
    font-weight: 700;
}

body.fwh-shell .fwh-global-tabs a {
    border-radius: 8px;
    color: #526173;
    font-weight: 700;
}

body.fwh-shell .fwh-global-tabs a:hover {
    background: #f1f7f4;
    color: #0f5f2d;
}

body.fwh-shell .fwh-global-tabs a.active {
    color: #0f5f2d;
    background: #eaf7ef;
}

body.fwh-shell .fwh-search-input {
    border: 1px solid #d9e4ec;
    background: #f8fafc;
    border-radius: 10px;
}

body.fwh-shell .fwh-search-input:focus {
    border-color: #73c792;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(22,163,74,.10);
}

body.fwh-shell .fwh-icon-button,
body.fwh-shell .fwh-user-button {
    border-color: #dde6ed;
    background: #fff;
}

body.fwh-shell .fwh-icon-button:hover,
body.fwh-shell .fwh-user-button:hover {
    border-color: #b9d9c5;
    background: #f6fbf8;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

body.fwh-shell .fwh-sidebar {
    background:
        linear-gradient(
            180deg,
            #0b2f4a 0%,
            #092a41 100%
        );
    color: rgba(255,255,255,.84);
}

body.fwh-shell .fwh-sidebar-section {
    color: rgba(255,255,255,.43);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

body.fwh-shell .fwh-side-link {
    color: rgba(255,255,255,.76);
    border-radius: 9px;
    font-weight: 650;
}

body.fwh-shell .fwh-side-link:hover {
    color: #fff;
    background: rgba(255,255,255,.075);
}

body.fwh-shell .fwh-side-link.active {
    color: #fff;
    background: rgba(34,197,94,.18);
    box-shadow: inset 3px 0 0 #22c55e;
}

body.fwh-shell .fwh-side-link.active i {
    color: #65dc91;
}


/* ============================================================
   PANELS + CARDS
   ============================================================ */

body.fwh-shell .card,
body.fwh-shell .fwh-panel,
body.fwh-shell .fwh-site-card,
body.fwh-shell .fwh-kpi {
    background: #fff;
    border: 1px solid #dfe8ef;
    border-radius: 14px;
    box-shadow:
        0 1px 2px rgba(15,23,42,.025),
        0 7px 24px rgba(15,23,42,.04);
}

body.fwh-shell .card:hover,
body.fwh-shell .fwh-panel:hover,
body.fwh-shell .fwh-kpi:hover {
    border-color: #d2e1e8;
}

body.fwh-shell .card-header,
body.fwh-shell .fwh-panel-head {
    background: #fff;
    border-bottom: 1px solid #e7edf2;
}

body.fwh-shell .fwh-panel-head h2,
body.fwh-shell .fwh-panel-head h3 {
    margin: 0;
    color: #0b2f4a;
    font-weight: 800;
    letter-spacing: -.015em;
}

body.fwh-shell .fwh-kpi-value {
    color: #0b2f4a;
    font-weight: 800;
    letter-spacing: -.035em;
}

body.fwh-shell .fwh-kpi-label {
    color: #667788;
    font-weight: 750;
}

body.fwh-shell .fwh-kpi-icon {
    background: #edf8f1;
    color: #15803d;
}


/* ============================================================
   BUTTONS
   ============================================================ */

body.fwh-shell .btn {
    border-radius: 9px;
    font-weight: 750;
    line-height: 1.2;
    padding: .68rem 1rem;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}

body.fwh-shell .btn:hover {
    transform: translateY(-1px);
}

body.fwh-shell .btn-primary,
body.fwh-shell .btn-success {
    color: #fff;
    background: #159447;
    border-color: #159447;
    box-shadow: 0 5px 14px rgba(21,148,71,.15);
}

body.fwh-shell .btn-primary:hover,
body.fwh-shell .btn-success:hover,
body.fwh-shell .btn-primary:focus,
body.fwh-shell .btn-success:focus {
    color: #fff;
    background: #117d3c;
    border-color: #117d3c;
}

body.fwh-shell .btn-secondary {
    color: #244155;
    background: #fff;
    border-color: #d6e1e9;
}

body.fwh-shell .btn-secondary:hover {
    color: #0b2f4a;
    background: #f6faf8;
    border-color: #bcd9c7;
}


/* ============================================================
   FORM CONTROLS
   ============================================================ */

body.fwh-shell .form-label {
    margin-bottom: .42rem;
    color: #34495a;
    font-size: .82rem;
    font-weight: 750;
}

body.fwh-shell .form-control,
body.fwh-shell .form-select,
body.fwh-shell .input-group-text {
    min-height: 44px;
    border-color: #d7e2ea;
    border-radius: 9px;
}

body.fwh-shell .form-control,
body.fwh-shell .form-select {
    background-color: #fff;
    color: #162536;
}

body.fwh-shell .form-control:hover,
body.fwh-shell .form-select:hover {
    border-color: #c2d1dc;
}

body.fwh-shell .form-control:focus,
body.fwh-shell .form-select:focus {
    border-color: #66c287;
    box-shadow: 0 0 0 3px rgba(21,148,71,.11);
}

body.fwh-shell .form-text {
    color: #778697;
}


/* ============================================================
   TABLES
   ============================================================ */

body.fwh-shell .table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    color: #263746;
}

body.fwh-shell .table > :not(caption) > * > * {
    padding: .82rem .9rem;
    border-bottom-color: #e8eef2;
    vertical-align: middle;
}

body.fwh-shell .table thead th {
    background: #f7fafb;
    color: #5d6e7e;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
    border-bottom: 1px solid #dfe8ee;
}

body.fwh-shell .table tbody tr:hover {
    background: #fafcfd;
}


/* ============================================================
   STATUS + BADGES
   ============================================================ */

body.fwh-shell .badge {
    border-radius: 999px;
    padding: .42em .68em;
    font-weight: 750;
}

body.fwh-shell .fwh-status {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .71rem;
    font-weight: 800;
}

body.fwh-shell .fwh-status.active,
body.fwh-shell .badge.bg-success {
    color: #126532 !important;
    background: #e8f7ee !important;
}

body.fwh-shell .fwh-status.pending,
body.fwh-shell .badge.bg-warning {
    color: #8b5b00 !important;
    background: #fff6dc !important;
}

body.fwh-shell .fwh-status.suspended,
body.fwh-shell .fwh-status.cancelled,
body.fwh-shell .badge.bg-danger {
    color: #9c2830 !important;
    background: #feecef !important;
}


/* ============================================================
   ALERTS
   ============================================================ */

body.fwh-shell .alert {
    border: 1px solid transparent;
    border-radius: 11px;
    box-shadow: none;
}

body.fwh-shell .alert-success {
    color: #155e32;
    background: #eefaf2;
    border-color: #caead5;
}

body.fwh-shell .alert-warning {
    color: #7c5200;
    background: #fff9e9;
    border-color: #f1dfad;
}

body.fwh-shell .alert-danger {
    color: #8e2831;
    background: #fff0f1;
    border-color: #efcdd1;
}

body.fwh-shell .alert-info {
    color: #145f7b;
    background: #edf8fc;
    border-color: #cce8f3;
}


/* ============================================================
   MODALS + DROPDOWNS
   ============================================================ */

body.fwh-shell .modal-content {
    border: 1px solid #dce6ed;
    border-radius: 16px;
    box-shadow: 0 26px 70px rgba(15,23,42,.20);
}

body.fwh-shell .modal-header,
body.fwh-shell .modal-footer {
    border-color: #e7edf2;
}

body.fwh-shell .dropdown-menu {
    border: 1px solid #dce5ec;
    border-radius: 11px;
    box-shadow: 0 18px 48px rgba(15,23,42,.13);
    padding: .42rem;
}

body.fwh-shell .dropdown-item {
    border-radius: 7px;
    padding: .56rem .65rem;
}

body.fwh-shell .dropdown-item:hover {
    background: #f1f7f4;
    color: #0f5f2d;
}


/* ============================================================
   PAGINATION
   ============================================================ */

body.fwh-shell .pagination {
    gap: 4px;
}

body.fwh-shell .page-link {
    min-width: 36px;
    border-radius: 8px !important;
    border-color: #dce5ec;
    color: #355165;
    text-align: center;
}

body.fwh-shell .page-link:hover {
    background: #eef8f2;
    border-color: #bcdcc8;
    color: #126532;
}


/* ============================================================
   SERVICE / TOOL CARDS
   ============================================================ */

body.fwh-shell .fwh-tool {
    border: 1px solid #e0e8ee;
    background: #fff;
    border-radius: 11px;
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}

body.fwh-shell .fwh-tool:hover {
    transform: translateY(-2px);
    border-color: #bcdcc8;
    box-shadow: 0 8px 22px rgba(15,23,42,.06);
}

body.fwh-shell .fwh-tool-icon {
    color: #15803d;
    background: #edf8f1;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {
    body.fwh-shell .fwh-page-head {
        flex-direction: column;
        align-items: stretch;
    }

    body.fwh-shell .fwh-page-head > .d-flex {
        flex-wrap: wrap;
    }

    body.fwh-shell .fwh-page-head .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 575.98px) {
    body.fwh-shell .fwh-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    body.fwh-shell .fwh-page-title {
        font-size: 1.55rem;
    }

    body.fwh-shell .card,
    body.fwh-shell .fwh-panel,
    body.fwh-shell .fwh-site-card,
    body.fwh-shell .fwh-kpi {
        border-radius: 11px;
    }

    body.fwh-shell .table-responsive {
        margin-left: -4px;
        margin-right: -4px;
    }
}