/* ============================================================
   Norsoft Service Desk theme
   Nordic-inspired enterprise palette: navy + steel + warm amber
   ============================================================ */

:root {
    --ns-primary: #0B2545;
    --ns-primary-dark: #061a36;
    --ns-secondary: #13315C;
    --ns-accent: #8DA9C4;
    --ns-accent-soft: #d6e1ee;
    --ns-cta: #DB8B30;
    --ns-cta-dark: #b8721f;
    --ns-success: #2E7D32;
    --ns-warning: #ED6C02;
    --ns-danger: #C62828;
    --ns-info: #0288D1;

    --ns-bg: #ffffff;
    --ns-surface: #f5f7fa;
    --ns-surface-2: #eaeff5;
    --ns-border: #dfe5ec;
    --ns-text: #1A202C;
    --ns-text-muted: #4A5568;
    --ns-text-soft: #6b7280;

    --ns-radius: 0.55rem;
    --ns-radius-sm: 0.35rem;
    --ns-shadow-sm: 0 1px 2px rgba(11,37,69,.08);
    --ns-shadow: 0 4px 18px rgba(11,37,69,.08);

    --bs-primary: var(--ns-primary);
    --bs-primary-rgb: 11, 37, 69;
}

html, body { height: 100%; }
body {
    background: var(--ns-bg);
    color: var(--ns-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ns-main { flex: 1; display: flex; flex-direction: column; }

/* Header ----------------------------------------------------- */
.ns-header { box-shadow: var(--ns-shadow-sm); }
.ns-navbar {
    background: var(--ns-primary);
    background: linear-gradient(135deg, var(--ns-primary) 0%, var(--ns-secondary) 100%);
}
.ns-navbar .navbar-brand,
.ns-navbar .nav-link {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 500;
}
.ns-navbar .nav-link:hover,
.ns-navbar .nav-link:focus,
.ns-navbar .navbar-brand:hover {
    color: #fff !important;
}
.ns-navbar .nav-link.active { color: #fff !important; }
.ns-navbar .navbar-toggler { border: none; color: #fff; }
.ns-navbar .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25); }
.ns-navbar .dropdown-menu {
    border: 1px solid var(--ns-border);
    box-shadow: var(--ns-shadow);
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--ns-cta);
    color: #fff;
    font-weight: 700;
    border-radius: 6px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,0.18);
}
.brand-text { color: #fff; font-size: 1.05rem; }

/* Avatar / chip --------------------------------------------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ns-cta);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Buttons ---------------------------------------------------- */
.btn-primary {
    background-color: var(--ns-primary);
    border-color: var(--ns-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--ns-primary-dark);
    border-color: var(--ns-primary-dark);
}
.btn-cta {
    background-color: var(--ns-cta);
    border-color: var(--ns-cta);
    color: #fff;
    font-weight: 600;
}
.btn-cta:hover, .btn-cta:focus {
    background-color: var(--ns-cta-dark);
    border-color: var(--ns-cta-dark);
    color: #fff;
}
.btn-outline-primary {
    color: var(--ns-primary);
    border-color: var(--ns-primary);
}
.btn-outline-primary:hover {
    background-color: var(--ns-primary);
    color: #fff;
}

a { color: var(--ns-secondary); text-decoration: none; }
a:hover { color: var(--ns-primary); text-decoration: underline; }

/* Cards ------------------------------------------------------ */
.card {
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm);
}
.card-header {
    background: var(--ns-surface);
    border-bottom: 1px solid var(--ns-border);
    font-weight: 600;
}

/* Tables ----------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(11,37,69,0.03);
}
.table thead th {
    background: var(--ns-surface);
    color: var(--ns-text-muted);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ns-border);
}
.table tbody tr { transition: background-color .15s ease; }

/* Badges ----------------------------------------------------- */
/* WCAG AA fixes: amber/orange backgrounds + light grey backgrounds carry dark text. */
.badge { font-weight: 500; padding: 0.42em 0.65em; border-radius: 999px; }
.badge-secondary { background: #6c757d; color: #fff; }
.badge-status-new { background: #6c757d; color: #fff; }
.badge-status-open { background: var(--ns-info); color: #fff; }
.badge-status-in-progress { background: var(--ns-cta); color: #212529; }
.badge-status-waiting { background: #6f42c1; color: #fff; }
.badge-status-on-hold { background: #adb5bd; color: #212529; }
.badge-status-resolved { background: var(--ns-success); color: #fff; }
.badge-status-closed { background: #495057; color: #fff; }
.badge-status-cancelled { background: #dee2e6; color: #212529; }

.badge-priority-low { background: #6c757d; color: #fff; }
.badge-priority-normal { background: var(--ns-info); color: #fff; }
.badge-priority-high { background: var(--ns-warning); color: #212529; }
.badge-priority-urgent { background: var(--ns-danger); color: #fff; }
.badge-priority-critical { background: #6f0606; color: #fff; }

.badge-quote-draft { background: #6c757d; color: #fff; }
.badge-quote-sent { background: var(--ns-info); color: #fff; }
.badge-quote-approved { background: var(--ns-success); color: #fff; }
.badge-quote-declined { background: var(--ns-danger); color: #fff; }
.badge-quote-expired { background: #adb5bd; color: #212529; }
.badge-quote-converted { background: var(--ns-primary); color: #fff; }

.badge-project-draft     { background: #6c757d;          color: #fff; }
.badge-project-active    { background: var(--ns-success); color: #fff; }
.badge-project-onhold    { background: var(--ns-cta);     color: #212529; }
.badge-project-complete  { background: var(--ns-info);    color: #fff; }
.badge-project-cancelled { background: #dee2e6;          color: #212529; }

/* Hero / landing -------------------------------------------- */
.hero {
    background: radial-gradient(120% 80% at 0% 0%, var(--ns-secondary) 0%, var(--ns-primary) 60%, var(--ns-primary-dark) 100%);
    color: #fff;
    padding: 5rem 0 6rem;
    position: relative;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 20% 110%, rgba(219,139,48,0.18), transparent 40%),
        radial-gradient(circle at 90% -10%, rgba(141,169,196,0.25), transparent 40%);
    pointer-events: none;
}
.hero h1 { font-weight: 700; font-size: clamp(1.85rem, 3.5vw, 3rem); line-height: 1.15; letter-spacing: -0.01em; }
.hero p.lead { color: rgba(255,255,255,0.85); font-size: clamp(1rem, 1.3vw, 1.2rem); }

/* Stat cards ------------------------------------------------ */
.stat-card {
    background: #fff;
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--ns-shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover { box-shadow: var(--ns-shadow); transform: translateY(-1px); }
.stat-card .label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ns-text-muted);
    font-weight: 600;
}
.stat-card .value { font-size: 1.85rem; font-weight: 700; color: var(--ns-primary); margin-top: .15rem; }
.stat-card .sub { color: var(--ns-text-soft); font-size: 0.85rem; }

/* Form polish ----------------------------------------------- */
.form-label { font-weight: 500; color: var(--ns-text-muted); }
.form-control, .form-select {
    border-color: var(--ns-border);
    border-radius: var(--ns-radius-sm);
}
.form-control:focus, .form-select:focus {
    border-color: var(--ns-secondary);
    box-shadow: 0 0 0 0.18rem rgba(19,49,92,0.18);
}

/* Auth pages (login / register / password reset, etc.) ------ */
.auth-shell {
    background: var(--ns-surface);
    padding: 2.5rem 0 3.5rem;
    flex: 1;
}
.auth-card { border-radius: var(--ns-radius); }
.auth-card .card-body { background: #fff; }
.auth-card h1 {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--ns-primary);
    margin-bottom: 0.35rem;
}
/* Scaffolded Identity pages use a stock <h2>/<h3> sub-heading — render it
   as a quiet sub-label rather than a giant heading inside the card. */
.auth-card h2, .auth-card h3 {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ns-text-muted);
    margin-bottom: 1.25rem;
}
/* The stock pages wrap content in a bare bootstrap .row with col-md-* columns
   (a form column + an external-login column). Inside the narrow auth card we
   want a single full-width column instead. */
.auth-card .row { margin: 0; }
.auth-card .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
}
/* Hide the "Use another service to log in" / external-login column. It only
   renders a developer placeholder when no providers are configured.
   NOTE: remove this rule when enabling Google/Microsoft SSO so the buttons show. */
.auth-card .col-md-6 { display: none; }
.auth-card .checkbox { margin: 0.25rem 0 1rem; }
.auth-card .btn-lg { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.auth-card hr { display: none; }
body.auth-page .ns-footer { margin-top: 0; }

/* List-group (account settings nav, etc.) — brand the active item ------ */
.list-group-item.active {
    background-color: var(--ns-primary);
    border-color: var(--ns-primary);
}

/* Ticket detail layout -------------------------------------- */
.ticket-thread .comment {
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    padding: 1rem 1.15rem;
    margin-bottom: 0.9rem;
    background: #fff;
    box-shadow: var(--ns-shadow-sm);
}
.ticket-thread .comment.internal {
    background: #fff7ec;
    border-color: #f3d49a;
}
.ticket-thread .comment .meta {
    font-size: 0.82rem;
    color: var(--ns-text-soft);
}
.ticket-thread .comment .body {
    margin-top: 0.5rem;
    white-space: pre-wrap;
}

/* Surfaces / panels ----------------------------------------- */
.surface { background: var(--ns-surface); padding: 2rem 0; }
.panel {
    background: #fff;
    border: 1px solid var(--ns-border);
    border-radius: var(--ns-radius);
    padding: 1.25rem;
    box-shadow: var(--ns-shadow-sm);
}

/* Footer ---------------------------------------------------- */
.ns-footer {
    background: var(--ns-surface);
    border-top: 1px solid var(--ns-border);
    color: var(--ns-text-muted);
    margin-top: 3rem;
}
.ns-footer a { color: var(--ns-text-muted); }
.ns-footer a:hover { color: var(--ns-primary); }

/* Utilities ------------------------------------------------- */
/* Skip-link is positioned only when focused — kept off-screen otherwise so it doesn't
   paint over the navbar for sighted users. */
.skip-link {
    display: inline-block;
    background: var(--ns-primary);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: var(--ns-radius-sm);
}
.skip-link:focus, .skip-link:focus-visible {
    position: fixed;
    left: 1rem;
    top: 0.5rem;
    z-index: 9999;
}
.text-cta { color: var(--ns-cta); }
.text-primary-dk { color: var(--ns-primary); }
.bg-surface { background: var(--ns-surface); }
.bg-cta { background-color: var(--ns-cta) !important; }
.divider-soft { border-top: 1px solid var(--ns-border); margin: 1.25rem 0; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--ns-text-muted); }
.empty-state .icon { font-size: 2.5rem; color: var(--ns-accent); margin-bottom: .75rem; }

/* Page-width utilities (replace inline style="max-width:..."). */
.ns-content-narrow { max-width: 640px;  margin-left: auto; margin-right: auto; }
.ns-content-form   { max-width: 880px;  margin-left: auto; margin-right: auto; }
.ns-content-wide   { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* Preserve newlines in user-supplied text without horizontal overflow. NEVER use @Html.Raw on these. */
.ns-prewrap { white-space: pre-wrap; word-break: break-word; }

/* Branded focus ring for the custom CTA button. */
.btn-cta:focus, .btn-cta:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(219, 139, 48, 0.45);
    outline: none;
}

/* Mobile tweaks --------------------------------------------- */
@media (max-width: 575.98px) {
    .hero { padding: 3rem 0 3.5rem; }
    .stat-card .value { font-size: 1.55rem; }
}

/* Kanban card (MyWork view) ---------------------------------- */
.kanban-card { display: block; padding: .5rem .5rem; border-radius: var(--ns-radius-sm); text-decoration: none; border-bottom: 1px solid var(--ns-border); }
.kanban-card:last-child { border-bottom: none; }
.kanban-card:focus-visible { outline: 2px solid var(--ns-secondary); outline-offset: 2px; }

/* Print ----------------------------------------------------- */
@media print {
    .ns-header, .ns-footer, .no-print { display: none !important; }
    body { background: #fff; }
}