:root {
    --bg: #eef1f4;
    --surface: #ffffff;
    --surface-muted: #e7ebf0;
    --text: #243142;
    --text-muted: #5f6d7c;
    --primary: #2f8f54;
    --primary-strong: #237341;
    --sidebar: #1f2f3d;
    --sidebar-width: 260px;
    --header-height: 60px;
    --sidebar-ink: #e3edf8;
    --success: #5cb85c;
    --danger: #b47272;
    --warning: #ad9a72;
    --radius: 12px;
    --radius-sm: 9px;
    --shadow: 0 10px 26px rgba(31, 47, 66, 0.08);
    --border: 1px solid #d7dfe8;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: radial-gradient(circle at 5% 0%, #f4f6f9 0%, var(--bg) 45%, #e7ecf2 100%);
    color: var(--text);
    font-family: "Manrope", "Segoe UI", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.panel-title,
.page-title,
.navbar-brand,
#companyTitle {
    font-family: "Sora", "Segoe UI", sans-serif;
    letter-spacing: -0.01em;
    color: #182430;
}

a {
    color: var(--primary);
}

a:hover,
a:focus {
    color: var(--primary-strong);
}

#wrapper .main {
    background: transparent;
}

.navbar.navbar-default,
.navbar.navbar-light {
    min-height: var(--header-height);
    background: rgba(255, 255, 255, 0.92);
    border: 0;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(22, 41, 58, 0.08);
}

.navbar-default .navbar-header {
    height: var(--header-height);
}

.brand {
    background: linear-gradient(140deg, #1f4e37, #2f6b4c);
}

.navbar-default .brand {
    width: var(--sidebar-width);
    height: 100%;
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.navbar-default .brand #companyTitle {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100%;
    font-size: clamp(12px, 1.05vw, 16px);
    line-height: 1.25;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-shadow: 0 2px 10px rgba(13, 45, 30, 0.45);
}

#companyTitle,
.navbar-brand {
    font-weight: 700;
    color: var(--sidebar-ink);
}

#sidebar-nav.sidebar {
    background: linear-gradient(180deg, #2c4356 0%, var(--sidebar) 100%);
}

.sidebar .nav > li > a,
.sidebar .nav > li > a span,
.sidebar .nav > li > a i {
    color: var(--sidebar-ink);
    font-weight: 600;
}

.sidebar .nav > li > a {
    margin: 15px 10px;
    border-radius: 10px;
    border: 1px solid rgba(163, 202, 189, 0.45);
    transition: all 0.2s ease;
}

.sidebar nav > .nav {
    margin-top: 14px;
}

.sidebar .nav > li > a:hover,
.sidebar .nav > li > a.active {
    background: rgba(55, 150, 99, 0.25);
    border-color: #8edab4;
    color: #fff;
}

.sidebar .nav .nav > li > a:hover,
.sidebar .nav .nav > li > a.active {
    color: #95f0be;
}

.sidebar .nav > li > a i {
    font-size: 18px;
    width: 22px;
    text-align: center;
}

.page-title,
.panel-title {
    font-weight: 700;
    color: #1f5d3d;
}

#companyTitle {
    color: var(--sidebar-ink) !important;
}

.panel,
.auth-box,
.card,
.modal-content,
.well {
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--surface);
}

.panel .panel-heading {
    background: transparent;
    border-bottom: var(--border);
    padding-top: 16px;
    padding-bottom: 12px;
}

.panel .panel-body {
    padding-top: 18px;
}

.metric .icon {
    border-radius: 12px;
    color: #f5f7fa;
    box-shadow: 0 10px 22px rgba(18, 40, 56, 0.28);
}

.metric {
    border: 1px solid #5e6f85;
}

.metric.metric-forest .icon {
    background: linear-gradient(145deg, #1f8f55, #32aa68);
}

.metric.metric-river .icon {
    background: linear-gradient(145deg, #2b6da8, #3f88c8);
}

.metric.metric-earth .icon {
    background: linear-gradient(145deg, #c17f2d, #d69a45);
}

.metric.metric-olive .icon {
    background: linear-gradient(145deg, #6e5fb0, #8477c4);
}

.btn {
    border-radius: var(--radius-sm);
    border-width: 1px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn:hover,
.btn:focus {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(31, 56, 75, 0.12);
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-strong);
    border-color: var(--primary-strong);
}

.btn-success {
    background: var(--success);
    border-color: #4cae4c;
}

.btn-success:hover,
.btn-success:focus {
    background: #449d44;
    border-color: #398439;
}

.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
    background: #449d44;
    border-color: #398439;
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
}

.btn-warning {
    background: var(--warning);
    border-color: var(--warning);
    color: #fff;
}

.btn-info {
    background: #7b8fa3;
    border-color: #7b8fa3;
}

.btn i,
.topButtons .btn i {
    color: #fff;
}

.table {
    border-collapse: separate;
    border-spacing: 0;
}

.table > thead > tr > th {
    background: var(--surface-muted);
    border-bottom: 1px solid #d8e0e9;
    border-top: 0;
    color: #304457;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.table > tbody > tr > td {
    border-top: 1px solid #e4eaf0;
    color: #24313f;
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    background: #f4f7fb;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select,
.form-control,
.fstdropdown > .fstselected,
select,
textarea,
input {
    border: 1px solid #d7e0ea;
    border-radius: 10px;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_filter input:focus,
.form-control:focus,
select:focus,
textarea:focus,
input:focus {
    border-color: #8ea1b6;
    box-shadow: 0 0 0 3px rgba(95, 118, 143, 0.14);
}

.modal-header {
    border-bottom: var(--border);
}

.modal-footer {
    border-top: var(--border);
}

.quick-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #cfd9e4;
    background: #fff;
    color: #21303d;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.quick-action-pill i {
    color: var(--primary);
}

.welcome-shell {
    min-height: 100vh;
    background: linear-gradient(120deg, rgba(44, 58, 74, 0.8), rgba(96, 114, 133, 0.52)), url("../img/trtc_new.jpg") center/cover no-repeat fixed;
}

.welcome-topbar {
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--radius);
    margin: 18px;
    box-shadow: var(--shadow);
}

.welcome-topbar .form-control {
    height: 42px;
}

@media screen and (max-width: 991px) {
    .navbar-default .brand {
        display: flex !important;
    }

    .welcome-topbar {
        margin: 10px;
        padding: 10px;
    }

    .welcome-topbar .col-md-3 {
        margin-bottom: 10px;
    }
}