/* =========================================================================================
 * Project: HurkTech.io
 * File: hurktech-theme.css
 * Component: Dashboard Presentation
 *
 * Purpose:
 * Defines shared dashboard visual tokens and reusable interface styles.
 *
 * Responsibilities:
 * - Styles the associated dashboard interface and states
 * - Maintains consistent spacing, color, and control treatments
 * - Provides responsive and accessible presentation rules
 *
 * Created: 2026-04-27
 * Last Updated: 2026-07-19
 * ========================================================================================= */

body {
    background:#0f172a !important;
    color:#e2e8f0 !important;
}

.card,
.tool-category-card,
.stats-card,
.dashboard-card,
.panel {
    background:#1e293b !important;
    border:1px solid #334155 !important;
}

table {
    background:#1e293b;
}

th {
    background:#2563eb !important;
    color:white;
}

td {
    border-bottom:1px solid #334155;
}

input,
select,
textarea {
    background:#111827 !important;
    border:1px solid #334155 !important;
    color:#e2e8f0 !important;
}

button,
.nav-button,
.tool-button,
.action-btn {
    background:#2563eb;
}

button:hover,
.nav-button:hover,
.tool-button:hover {
    background:#1d4ed8;
}

/* ========================================================================================= */

/* SHARED DASHBOARD NAVIGATION BUTTONS                                                       */

/* ========================================================================================= */

.nav-button,
a[href$="dashboard.php"] {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:42px !important;
    padding:0 18px !important;
    box-sizing:border-box !important;
    background:rgba(20,184,166,.08) !important;
    border:1px solid #14b8a6 !important;
    border-radius:6px !important;
    color:#99f6e4 !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease !important;
}

.nav-button:hover,
a[href$="dashboard.php"]:hover {
    background:rgba(20,184,166,.18) !important;
    border-color:#2dd4bf !important;
    color:#ccfbf1 !important;
    box-shadow:0 5px 16px rgba(20,184,166,.12) !important;
}

/* ========================================================================================= */

/* SHARED DASHBOARD PAGE HEADER                                                             */

/* ========================================================================================= */

.ht-page-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:28px;
    width:min(100%,1500px);
    margin:0 auto 28px;
    padding:4px 0 24px;
    border-bottom:1px solid #2d4057;
}

.ht-page-header__copy {
    min-width:0
}

.ht-page-header__eyebrow {
    margin:0 0 6px;
    color:#99f6e4;
    font-size:11px;
    font-weight:800;
    letter-spacing:1.4px;
    line-height:1.2;
    text-transform:uppercase;
}

.ht-page-header__title {
    margin:0 !important;
    color:#f8fafc !important;
    font-size:38px !important;
    font-weight:750 !important;
    letter-spacing:-.8px !important;
    line-height:1.1 !important;
    text-align:left !important;
}

.ht-page-header__subtitle {
    margin:6px 0 0;
    color:#9eabc0;
    font-size:14px;
    font-weight:500;
    line-height:1.45;
}

.ht-page-header__actions {
    display:flex;
    flex:0 0 auto;
    align-items:center;
    gap:10px;
    padding-top:24px;
}

.ht-page-header__dashboard {
    display:inline-flex !important;
    min-height:42px !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 18px !important;
    border:1px solid #14b8a6 !important;
    border-radius:6px !important;
    background:rgba(20,184,166,.08) !important;
    color:#99f6e4 !important;
    font-size:14px !important;
    font-weight:650 !important;
    line-height:1.2 !important;
    text-decoration:none !important;
    white-space:nowrap;
}

.ht-page-header__dashboard:hover {
    border-color:#2dd4bf !important;
    background:rgba(20,184,166,.18) !important;
    color:#ccfbf1 !important;
    box-shadow:0 5px 16px rgba(20,184,166,.12) !important;
}

.ht-page-header__action {
    display:inline-flex;
    min-height:42px;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border:1px solid #51657d;
    border-radius:6px;
    background:#25384f;
    color:#e5edf6;
    font-size:14px;
    font-weight:650;
    text-decoration:none;
    white-space:nowrap;
}

.ht-page-header__action:hover {
    border-color:#71849a;
    background:#31465f;
    color:#fff
}

.ht-page-header__action--danger {
    border-color:#ef4444;
    background:rgba(239,68,68,.08);
    color:#fecaca
}

.ht-page-header__action--danger:hover {
    border-color:#f87171;
    background:#991b1b;
    color:#fff
}

@media(max-width:720px) {
    .ht-page-header {
        flex-direction:column;
        gap:16px;
        padding-bottom:20px
    }

    .ht-page-header__actions {
        padding-top:0
    }

    .ht-page-header__title {
        font-size:31px !important
    }

}

a[href$="logout.php"] {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:42px !important;
    padding:0 18px !important;
    box-sizing:border-box !important;
    background:rgba(239,68,68,.08) !important;
    border:1px solid #ef4444 !important;
    border-radius:6px !important;
    color:#fecaca !important;
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.2 !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease !important;
}

a[href$="logout.php"]:hover {
    background:rgba(239,68,68,.2) !important;
    border-color:#f87171 !important;
    color:#fff !important;
    box-shadow:0 5px 16px rgba(239,68,68,.12) !important;
}