// Indian Coast Guard DMS — Government Dashboard Theme
// Blue / white, minimal, Bootstrap 5 based.

$primary: #0a3d62;
$secondary: #5c7080;
$success: #1e824c;
$danger: #c0392b;
$warning: #d4a017;
$info: #0d6efd;
$light: #f4f6f9;
$dark: #0c2b45;

$body-bg: #f4f6f9;
$border-radius: 0.5rem;

// Condensed naval-signage face, applied as the base font (not just
// headings) so every element is visually consistent — card headers, stat
// numbers, and table text in this app are mostly styled <div>s and <span>s,
// not real h1–h6 tags, so a headings-only override would have missed most
// of the UI. The Oswald weights are loaded via app.js (@fontsource), not
// linked here, so Vite bundles the actual font files instead of leaving a
// CDN dependency.
$font-family-sans-serif: 'Oswald', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
$font-family-display: $font-family-sans-serif;

@import "bootstrap/scss/bootstrap";

// Point the icon font at its real on-disk location so Vite copies and
// hashes the woff/woff2 files instead of leaving unresolved relative URLs.
$bootstrap-icons-font-dir: "../../node_modules/bootstrap-icons/font/fonts";
@import "bootstrap-icons/font/bootstrap-icons";

// Role highlight colors (also used later for track-changes attribution)
:root {
    --role-sailor: #c0392b;
    --role-junior_officer: #d97706;
    --role-field_officer: #1e824c;
    --role-senior_command: #0d6efd;
    --role-commander: #7b2cbf;
    --role-super_admin: #0a3d62;
}

// Scaling the root size (rather than just $font-size-base) grows every
// rem-based measurement together — Bootstrap's own components as well as
// the hardcoded rem font-sizes sprinkled through the blade views — so text,
// spacing, and icons all grow in proportion instead of text alone growing
// inside unchanged padding.
html {
    font-size: 18px;
}

body {
    min-height: 100vh;
}

// ---------- Guest / login ----------
.auth-wrapper {
    min-height: 100vh;
    background: linear-gradient(160deg, $dark 0%, $primary 60%, #14527d 100%);
}

.auth-card {
    max-width: 420px;
    width: 100%;
}

.auth-emblem {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: $primary;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1rem;
}

// ---------- App shell ----------
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: $dark;
    color: #dbe7f0;
    min-height: 100vh;
    position: sticky;
    top: 0;
}

.app-sidebar .brand {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.app-sidebar .brand > div > .text-white {
    font-family: $font-family-display;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.95rem;
}

.app-sidebar .nav-section-title {
    font-family: $font-family-display;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.app-sidebar .nav-link {
    color: #b9cbd8;
    padding: 0.6rem 1.25rem;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.app-sidebar .nav-link.active,
.app-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-left-color: $info;
}

.app-sidebar .nav-section-title {
    color: #6f8ba0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1rem 1.25rem 0.25rem;
}

.app-main {
    flex-grow: 1;
    min-width: 0;
}

.app-topbar {
    background: #fff;
    border-bottom: 1px solid #e3e8ee;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.app-content {
    padding: 1.5rem;
}

// ---------- Widgets ----------
.stat-card {
    border: 1px solid #e3e8ee;
    border-radius: $border-radius;
    background: #fff;
    padding: 1.1rem 1.25rem;
    height: 100%;
}

.stat-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 600;
}

.notification-bell .badge {
    font-size: 0.6rem;
}

.priority-badge-high { background-color: $danger; }
.priority-badge-medium { background-color: $warning; color: #3a2b00; }
.priority-badge-low { background-color: $success; }

// Shared fixed width for every pill-style badge — priority (High/Medium/Low)
// and status (Draft/Approved/...) alike — so they all line up at the same
// size wherever they appear, in the same table or different ones. Font-size
// stays at the normal badge size; the one long status label ("Pending
// Commander Approval") wraps to two lines instead of forcing every badge
// to be wide.
.priority-badge-fixed,
.status-badge-fixed {
    display: inline-block;
    width: 6.5rem;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
}

.status-badge-draft { background-color: $secondary; }
.status-badge-under_review { background-color: $info; }
.status-badge-pending_approval { background-color: $warning; color: #3a2b00; }
.status-badge-approved { background-color: $success; }
.status-badge-completed { background-color: $primary; }
.status-badge-rejected { background-color: $danger; }

.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.role-chip .dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    display: inline-block;
}

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        left: -260px;
        z-index: 1030;
        transition: left 0.2s ease-in-out;
        height: 100vh;
    }

    .app-sidebar.show {
        left: 0;
    }
}