@import url("theme.css");

:root {
    --smap-primary: #164e63;
    --smap-primary-dark: #0f2f3a;
    --smap-primary-soft: #e6f4f7;
    --smap-accent: #0f766e;
    --smap-accent-soft: #dff7f2;
    --smap-warning: #f59e0b;
    --smap-danger: #dc2626;
    --smap-bg: #f5f8fb;
    --smap-surface: #ffffff;
    --smap-text: #111827;
    --smap-muted: #64748b;
    --smap-border: #dbe5ea;
    --primary-blue: var(--smap-primary);
    --accent-gold: var(--smap-warning);
    --mantra-red: var(--smap-accent);
    --mantra-dark: var(--smap-primary-dark);
    --mantra-bg: var(--smap-bg);
}

body {
    background-color: var(--smap-bg);
    color: var(--smap-text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

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

a:hover {
    color: var(--smap-accent);
}

.btn {
    border-radius: 8px;
}

.btn-primary,
.btn-mantra-primary,
.btn-mantra,
button.btn-primary {
    background: linear-gradient(135deg, var(--smap-primary), var(--smap-accent)) !important;
    border-color: var(--smap-primary) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(15, 78, 99, 0.18);
}

.btn-primary:hover,
.btn-mantra-primary:hover,
.btn-mantra:hover,
button.btn-primary:hover {
    background: linear-gradient(135deg, var(--smap-primary-dark), var(--smap-primary)) !important;
    border-color: var(--smap-primary-dark) !important;
    color: #fff !important;
}

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

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

.text-primary {
    color: var(--smap-primary) !important;
}

.bg-primary {
    background-color: var(--smap-primary) !important;
}

.border-primary {
    border-color: var(--smap-primary) !important;
}

.card,
.modal-content,
.filter-card,
.table-container,
.master-card,
.settings-card,
.form-card,
.table-card {
    border: 1px solid rgba(219, 229, 234, 0.8) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(15, 47, 58, 0.07) !important;
}

.card-header,
.modal-header {
    background: #fff !important;
    border-bottom: 1px solid var(--smap-border) !important;
}

.form-control,
.form-select,
.input-group-text {
    border-color: var(--smap-border);
    border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--smap-accent);
    box-shadow: 0 0 0 0.25rem rgba(15, 118, 110, 0.12);
}

.table thead th {
    color: #475569;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.master-table thead th {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
    border: none !important;
}

.badge-scheme {
    background: var(--smap-primary-soft) !important;
    color: var(--smap-primary) !important;
    border: 1px solid var(--smap-border) !important;
    font-weight: 800 !important;
}

.top-nav {
    background: #fff;
    border-bottom: 2px solid var(--smap-accent) !important;
    box-shadow: 0 4px 12px rgba(15, 47, 58, 0.06) !important;
}

.console-badge,
.role-badge {
    background: var(--smap-accent) !important;
    color: #fff !important;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 999px;
    padding: 0.38rem 0.62rem;
}

.stat-card {
    border: none !important;
    border-bottom: 4px solid var(--smap-accent) !important;
    border-radius: 12px !important;
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
}

.icon-box,
.metric-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.badge.bg-success,
.badge.bg-secondary,
.badge.bg-danger {
    border-radius: 999px;
}

.sidebar {
    background: linear-gradient(180deg, var(--smap-primary-dark), #123f4d);
    min-height: 100vh;
    color: white;
}

.card-stat {
    border-left: 5px solid var(--primary-blue);
    transition: transform 0.2s;
}

.card-stat:hover {
    transform: translateY(-5px);
}

.attendance-low {
    color: #dc3545; /* Red for <75% */
    font-weight: bold;
}/* CSS Document */

/**************** Left Menu   ***************/
/* Sidebar Professional Styling */
.sidebar {
    background: linear-gradient(180deg, var(--smap-primary-dark), #123f4d);
    min-height: 100vh;
    border-right: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
}

.sidebar .nav-link {
    color: #94a3b8; /* Soft Slate Gray */
    font-size: 0.92rem;
    font-weight: 500;
    border-radius: 12px;
    display: flex;
    align-items: center;
    transition: all 0.2s ease;
}

.sidebar .nav-link i {
    transition: transform 0.2s ease;
}

/* Hover Effect */
.sidebar .nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}

.sidebar .nav-link:hover i {
    transform: scale(1.1);
}

/* Active State - The Professional Indicator */
.sidebar .nav-link.active {
    color: #ffffff;
    background: linear-gradient(90deg, var(--smap-accent) 0%, #14b8a6 100%);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.25);
}

.sidebar .nav-link.active i {
    color: #ffffff;
}

/* Header Adjustments */
.sidebar-header hr {
    opacity: 0.1;
    margin: 1rem 0;
}

.profile-icon-wrapper div {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* Present: Light Green Background, Dark Green Text */
.status-p { background-color: #d1e7dd !important; }
.t-in-dark { color: #0f5132; display: block; font-weight: bold; font-size: 0.55rem; border-bottom: 1px solid rgba(0,0,0,0.05); }
.t-out-dark { color: #0a3622; display: block; font-weight: bold; font-size: 0.55rem; }

/* Absent: Light Red Background, Dark Red Text */
.status-a-bg { background-color: #f8d7da !important; }
.t-a-dark { color: #842029; font-weight: bold; }

/* Existing Week-off Style */
.status-w { background: #f1f5f9; font-weight: bold; color: #64748b; }

/* Column adjustments */
.report-table th { padding: 8px 4px; vertical-align: middle; }

/* Professional login layout */
.login-shell {
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 20%, rgba(20, 184, 166, 0.18), transparent 30%),
        linear-gradient(135deg, #eef7f8 0%, #f8fafc 48%, #e9f4f2 100%);
}

.login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 0.95fr) minmax(380px, 1.05fr);
}

.login-brand-panel {
    background:
        linear-gradient(145deg, rgba(15, 47, 58, 0.94), rgba(22, 78, 99, 0.9)),
        url("https://images.unsplash.com/photo-1552664730-d307ca884978?auto=format&fit=crop&w=1400&q=80");
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.brand-mark span {
    display: block;
    font-size: 2.3rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.brand-mark small,
.login-brand-panel p,
.login-capabilities span {
    color: rgba(255, 255, 255, 0.78);
}

.login-badge,
.section-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-badge {
    background: rgba(20, 184, 166, 0.2);
    color: #bffaf0;
    border: 1px solid rgba(191, 250, 240, 0.24);
    margin-bottom: 18px;
}

.login-brand-panel h1 {
    max-width: 560px;
    font-size: clamp(2.25rem, 5vw, 4.8rem);
    font-weight: 900;
    line-height: 0.98;
    margin-bottom: 18px;
}

.login-brand-panel p {
    max-width: 560px;
    font-size: 1.04rem;
}

.login-capabilities {
    display: grid;
    gap: 12px;
}

.login-capabilities div {
    display: flex;
    gap: 12px;
    align-items: center;
}

.login-capabilities i {
    color: #5eead4;
}

.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.login-card-pro {
    width: min(100%, 460px);
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(219, 229, 234, 0.9);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(15, 47, 58, 0.14);
    padding: 42px;
}

.section-eyebrow {
    background: var(--smap-primary-soft);
    color: var(--smap-primary);
    margin-bottom: 14px;
}

.login-card-pro h2 {
    font-size: 2rem;
    font-weight: 850;
    margin-bottom: 8px;
}

.login-card-pro p {
    color: var(--smap-muted);
    margin-bottom: 0;
}

.login-card-pro .form-label {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.input-group-pro .input-group-text {
    background: #f8fafc;
    color: var(--smap-primary);
}

.login-switcher {
    border-top: 1px solid var(--smap-border);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 28px;
    padding-top: 22px;
}

.login-switcher a {
    color: var(--smap-primary);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.login-switcher a:hover {
    color: var(--smap-accent);
}

@media (max-width: 900px) {
    .login-page {
        grid-template-columns: 1fr;
    }

    .login-brand-panel {
        min-height: 320px;
        padding: 32px;
    }

    .login-card-pro {
        padding: 28px;
    }
}

/* Standalone TC utility pages */
.utility-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 12%, rgba(20, 184, 166, 0.14), transparent 28%),
        linear-gradient(135deg, #f8fafc 0%, #eef7f8 100%);
}

.utility-card {
    background: #fff;
    border: 1px solid var(--smap-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(15, 47, 58, 0.12);
}

.utility-title {
    color: var(--smap-text);
    font-weight: 850;
}