/* Centralized theme for the Deeplabs System Service Centre */
:root{
  --brand:#1E5BD7;
  --brand-dark:#123B8A;
  --brand-light:#DCE8FC;
  --bg:#ffffff;
  --muted:#6b7280;
}

body{background:var(--bg);color:#111}

/* Buttons */
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-secondary{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn-danger{background:#ef4444;color:#fff}

.table{width:100%;border-collapse:collapse}
.table th, .table td{padding:8px;border-bottom:1px solid #e5e7eb}

/* Utility */
.text-brand{color:var(--brand)}

/* Truncate long text in table cells to avoid layout breaking */
.col-truncate{display:inline-block;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.muted-ellipsis{color:var(--muted);font-size:12px;font-style:italic;display:inline-block;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Cards */
.card{border:1px solid #e6eefc;padding:12px;border-radius:8px}

/* Forms */
input, textarea, select{padding:8px;border:1px solid #d1d5db;border-radius:4px}

/* Sidebar spacing for admin pages */
.sidenav{width:220px;float:left;margin-right:16px}
.main-content{margin-left:240px}

@media(max-width:768px){.sidenav{display:none}.main-content{margin-left:0}}

/* theme.css */

/* Base */
body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f9f9f9;
    color: #333;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

.text-center {
    text-align: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

/* Header */
.header {
    background: linear-gradient(135deg, #07172f 0%, #1e5bd7 65%, #c92b2b 100%);
    color: #fff;
    padding: 1rem 0;
}

.logo-box {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo {
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.site-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.nav a {
    color: #fff;
    margin-left: 1rem;
    text-decoration: none;
    transition: color 0.3s;
}

    .nav a:hover {
        color: #cce0ff;
    }

/* Buttons */
.btn {
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-light {
    background: #fff;
    color: #004080;
}

    .btn-light:hover {
        background: #f0f0f0;
    }

.btn-outline {
    border: 2px solid #fff;
    color: #fff;
}

    .btn-outline:hover {
        background: #fff;
        color: #004080;
    }

/* Hero */
.hero {
    background: linear-gradient(135deg, #07172f 0%, #1e5bd7 65%, #c92b2b 100%);
    color: #fff;
    padding: 4rem 1rem;
}

.hero-text h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero-text p {
    max-width: 500px;
    margin-bottom: 2rem;
    color: #e0e0e0;
}

.hero-image img {
    max-width: 250px;
    border: 6px solid #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Sections */
.section {
    padding: 4rem 1rem;
    background: #fff;
}

.section-alt {
    padding: 4rem 1rem;
    background: #f5f8ff;
}

.section h2 {
    color: #123b8a;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.section-subtitle {
    color: #666;
    margin-bottom: 2rem;
}

/* Cards */
.grid {
    display: grid;
    gap: 2rem;
}

    .grid.contact-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

.card {
    background: #fff;
    border: 1px solid #dce8fc;
    padding: 2rem;
    border-radius: 10px;
    transition: box-shadow 0.3s;
}

    .card:hover {
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    }

    .card h3 {
        color: #004080;
        margin-bottom: 1rem;
    }

/* Footer */
.footer {
    background: #07172f;
    color: #fff;
    padding: 2rem 1rem;
}

    .footer h3 {
        margin-bottom: 1rem;
    }

.footer p.small {
        color: #ccc;
        font-size: 0.85rem;
    }

/* Blue brand overrides for every non-landing page */
:root {
    --navy: #07172f;
    --navy-mid: #0d2b5e;
    --blue: #2f6df0;
    --blue-dark: #1f56c5;
    --blue-lt: #72a2ff;
    --blue-pale: #dbeafe;
    --blue-xpale: #eff4ff;
    --blue-glow: rgba(47, 109, 240, 0.18);
    --accent: #4d82ff;
    --bg: #eef3fb;
    --surface: #ffffff;
    --surface-2: #f8faff;
    --border: #d8e3f3;
    --text: #0f1f3d;
    --muted: #607590;
    --orange: #ef153b;
    --orange-lt: #ff6d78;
    --orange-pale: #fee2e2;
    --orange-xpale: #fff1f2;
    --shadow-orange: 0 6px 24px rgba(239, 21, 59, 0.28);
}

body:not(.landing-page) {
    background:
        radial-gradient(circle at top right, rgba(47, 109, 240, 0.12), transparent 26%),
        radial-gradient(circle at top left, rgba(31, 86, 197, 0.08), transparent 22%),
        var(--bg);
    color: var(--text);
}

body:not(.landing-page) .sidebar,
body:not(.landing-page) .auth-panel,
body:not(.landing-page) .card-top {
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 58%, var(--blue) 100%) !important;
}

body:not(.landing-page) .mc1 {
    background: radial-gradient(circle, rgba(47, 109, 240, 0.55), transparent 70%) !important;
}

body:not(.landing-page) .mc2 {
    background: radial-gradient(circle, #07172f, #2f6df0 60%, transparent 80%) !important;
}

body:not(.landing-page) .sb-logo,
body:not(.landing-page) .sb-avatar,
body:not(.landing-page) .tb-avatar,
body:not(.landing-page) .role-icon,
body:not(.landing-page) .card-icon {
    background: linear-gradient(135deg, var(--blue), var(--blue-lt)) !important;
    box-shadow: 0 10px 24px rgba(47, 109, 240, 0.22) !important;
    color: #ffffff !important;
}

body:not(.landing-page) .panel-logo-img {
    box-shadow: 0 0 28px rgba(47, 109, 240, 0.32) !important;
}

body:not(.landing-page) .sb-link.active,
body:not(.landing-page) .sb-lnk.active,
body:not(.landing-page) .sb-link-hub.active {
    background: linear-gradient(135deg, var(--blue), var(--navy-mid)) !important;
    box-shadow: 0 4px 20px rgba(47, 109, 240, 0.35) !important;
    color: #ffffff !important;
}

body:not(.landing-page) .sb-link.active::before,
body:not(.landing-page) .sb-lnk.active::before {
    background: #ffffff !important;
}

body:not(.landing-page) .sb-logout:hover {
    background: rgba(47, 109, 240, 0.12) !important;
    color: #9cc0ff !important;
}

body:not(.landing-page) .btn-primary,
body:not(.landing-page) .btn-submit,
body:not(.landing-page) .btn-main {
    background: linear-gradient(135deg, var(--blue), var(--navy-mid)) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(47, 109, 240, 0.22) !important;
}

body:not(.landing-page) .btn-primary:hover,
body:not(.landing-page) .btn-submit:hover,
body:not(.landing-page) .btn-main:hover {
    background: linear-gradient(135deg, var(--blue-lt), var(--blue)) !important;
    color: #ffffff !important;
}

body:not(.landing-page) .header,
body:not(.landing-page) .hero {
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 65%, var(--blue-lt) 100%) !important;
}

body:not(.landing-page) .section h2 {
    color: var(--navy-mid) !important;
}

body:not(.landing-page) .footer {
    background: var(--navy) !important;
    color: #ffffff !important;
}

body:not(.landing-page) .btn-light {
    background: #ffffff !important;
    color: var(--blue) !important;
    border: 1px solid var(--blue) !important;
}

body:not(.landing-page) .btn-light:hover {
    background: #f0f6ff !important;
    color: var(--navy-mid) !important;
}

body:not(.landing-page) .btn-outline {
    border: 2px solid var(--blue) !important;
    color: var(--blue) !important;
}

body:not(.landing-page) .btn-outline:hover {
    background: var(--blue) !important;
    color: #ffffff !important;
}

body:not(.landing-page) .forgot,
body:not(.landing-page) .back-link,
body:not(.landing-page) .footer-note a,
body:not(.landing-page) .auth-footer a,
body:not(.landing-page) .btn-secondary,
body:not(.landing-page) .btn-ghost {
    color: var(--blue) !important;
}

body:not(.landing-page) .role-card:hover {
    border-color: var(--blue) !important;
    background: #f4f8ff !important;
    box-shadow: 0 10px 26px rgba(47, 109, 240, 0.14) !important;
}

body:not(.landing-page) .role-card:hover .role-icon {
    color: var(--blue) !important;
}

body:not(.landing-page) .panel-feat i,
body:not(.landing-page) .card-sub i {
    color: #bfdbfe !important;
}