:root {
    --pdps-navy: #001f4d;
    --pdps-navy-2: #062b5f;
    --pdps-sidebar: #001d46;
    --pdps-blue: #0d6efd;
    --pdps-cyan: #2b8cff;
    --app-radius: .7rem;
    --app-radius-sm: .5rem;
    --app-border: #d8dee8;
    --app-border-strong: #c6ceda;
    --app-surface: #ffffff;
    --app-surface-2: #f7f9fb;
    --app-canvas: #eef2f6;
    --app-muted: #677486;
    --app-shadow: 0 8px 24px rgba(15, 23, 42, .07);
    --app-shadow-sm: 0 2px 8px rgba(15, 23, 42, .05);
    --sidebar-width: 178px;
    --topbar-height: 52px;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #2b3035;
    --bs-body-color: #edf2f7;
    --bs-emphasis-color: #f8fafc;
    --bs-secondary-color: #aeb8c5;
    --bs-tertiary-bg: #24292e;
    --app-border: #3a434c;
    --app-border-strong: #4a5560;
    --app-surface: #23282d;
    --app-surface-2: #20252a;
    --app-canvas: #2b3035;
    --app-muted: #aeb8c5;
    --app-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    --app-shadow-sm: 0 2px 8px rgba(0, 0, 0, .14);
}

html,
body {
    min-height: 100%;
}

body {
    background: var(--app-canvas);
    font-size: .875rem;
}

body.sidebar-open {
    overflow: hidden;
}

/* CRM-style application shell */
.app-shell {
    min-height: 100vh;
}

.app-topbar,
.public-topbar {
    height: var(--topbar-height);
    background: var(--pdps-navy);
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1040;
    padding: 0 .65rem;
}

.public-topbar {
    position: sticky;
}

.app-topbar-brand-wrap,
.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.app-topbar-brand {
    display: inline-flex;
    align-items: center;
    min-width: calc(var(--sidebar-width) - .7rem);
    text-decoration: none;
}

.app-topbar-brand img {
    width: auto;
    height: 42px;
    max-width: 112px;
    object-fit: contain;
    background: #fff;
    padding: 1px 3px;
}

.app-sidebar-toggle,
.app-topbar-icon,
.app-user-menu {
    color: rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .03);
    border-radius: .45rem;
    min-height: 30px;
}

.app-sidebar-toggle,
.app-topbar-icon {
    width: 32px;
    padding: 0;
    display: inline-grid;
    place-items: center;
}

.app-sidebar-toggle:hover,
.app-topbar-icon:hover,
.app-user-menu:hover,
.app-user-menu.show {
    color: #fff;
    border-color: rgba(255, 255, 255, .42);
    background: rgba(255, 255, 255, .09);
}

.app-user-menu {
    max-width: 190px;
    padding: .28rem .5rem;
    font-size: .75rem;
    gap: .35rem;
    align-items: center;
}

.app-user-menu span {
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-topbar-primary {
    min-height: 30px;
    border-radius: .45rem;
    font-size: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding-inline: .65rem;
}

.app-global-search {
    width: min(100%, 210px);
    height: 29px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .09);
    border-radius: .25rem;
    overflow: hidden;
}

.app-global-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    padding: .2rem .45rem;
    font-size: .72rem;
}

.app-global-search input::placeholder {
    color: rgba(255, 255, 255, .68);
}

.app-global-search button {
    width: 30px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .2);
    background: transparent;
    color: rgba(255, 255, 255, .8);
}

.app-sidebar {
    width: var(--sidebar-width);
    position: fixed;
    left: 0;
    top: var(--topbar-height);
    bottom: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    background: var(--pdps-sidebar);
    border-right: 1px solid rgba(255, 255, 255, .12);
    color: #d9e7f6;
    overflow-y: auto;
}

.app-sidebar-nav {
    padding: .55rem .55rem 1rem;
    flex: 1;
}

.sidebar-section-label {
    color: #80b8ef;
    text-transform: uppercase;
    font-size: .6rem;
    letter-spacing: .055em;
    font-weight: 800;
    padding: .55rem .4rem .28rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #d7e6f5;
    text-decoration: none;
    min-height: 36px;
    padding: .48rem .48rem;
    border-radius: .35rem;
    font-size: .77rem;
    font-weight: 500;
    transition: background-color .12s ease, color .12s ease;
}

.sidebar-link i {
    width: 17px;
    text-align: center;
    color: #9fc4eb;
    font-size: .82rem;
}

.sidebar-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.sidebar-link.active {
    color: #fff;
    background: rgba(13, 110, 253, .2);
    box-shadow: inset 2px 0 0 #3f91ff;
}

.sidebar-link.active i {
    color: #65a7ff;
}

.app-sidebar-footer {
    padding: .7rem .8rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: #9db3c9;
    font-size: .68rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.sidebar-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #32c682;
    box-shadow: 0 0 0 3px rgba(50, 198, 130, .13);
}

.app-page {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    padding-top: var(--topbar-height);
    display: flex;
    flex-direction: column;
}

.app-main {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
    padding: 1rem 1.4rem 1.25rem;
    flex: 1;
}

.app-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1.4rem 1rem;
    color: var(--bs-secondary-color);
    font-size: .68rem;
}

.app-sidebar-backdrop {
    display: none;
}

.public-main {
    width: min(100% - 1.5rem, 1500px);
    margin-inline: auto;
}

/* Page header */
.page-heading {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

.page-eyebrow {
    color: #1682ff;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: .22rem;
}

.page-heading h1 {
    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.025em;
    margin-bottom: .22rem;
}

.page-heading p {
    color: var(--bs-secondary-color);
    font-size: .8rem;
    margin-bottom: 0;
}

/* Cards and metrics */
.card {
    background: var(--app-surface);
    border-color: var(--app-border);
    border-radius: var(--app-radius);
}

.app-card,
.filter-card,
.table-card,
.metric-card {
    box-shadow: none;
}

.app-card,
.table-card {
    overflow: hidden;
}

.app-card .card-header,
.table-card .card-header {
    background: var(--app-surface-2) !important;
    border-bottom-color: var(--app-border);
    padding: .62rem .78rem;
}

.card-body {
    padding: .8rem;
}

.metric-card {
    height: 100%;
    overflow: hidden;
    transition: border-color .12s ease, transform .12s ease;
}

.metric-card:hover {
    border-color: #3f91ff;
    transform: translateY(-1px);
}

.metric-card .card-body {
    padding: .65rem .75rem;
}

.metric-card .metric-icon {
    width: 2rem;
    height: 2rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    color: #1682ff;
    background: rgba(13, 110, 253, .12);
    border: 1px solid rgba(13, 110, 253, .12);
}

.metric-label {
    color: var(--bs-secondary-color);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.2;
}

.metric-value {
    font-size: clamp(1.25rem, 1.7vw, 1.65rem);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -.025em;
}

.metric-note {
    font-size: .66rem;
    color: var(--bs-secondary-color);
}

.metric-danger .metric-icon { color: #e45160; background: rgba(220, 53, 69, .1); }
.metric-warning .metric-icon { color: #e0a000; background: rgba(255, 193, 7, .11); }
.metric-success .metric-icon { color: #2ba36f; background: rgba(25, 135, 84, .11); }
.metric-info .metric-icon { color: #31a7d1; background: rgba(13, 202, 240, .1); }

.filter-card {
    background: var(--app-surface-2);
}

.filter-card .card-body {
    padding: .72rem .8rem;
}

.filter-card .form-label,
.form-label {
    font-size: .68rem;
    color: var(--bs-body-color);
    font-weight: 650;
    margin-bottom: .3rem;
}

.section-title {
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: -.008em;
}

/* Forms */
.form-control,
.form-select,
.input-group-text {
    border-color: var(--app-border-strong);
    border-radius: .45rem;
    min-height: 34px;
    font-size: .8rem;
    background-color: var(--app-surface);
}

.input-group > .form-control,
.input-group > .form-select,
.input-group > .input-group-text {
    border-radius: 0;
}

.input-group > :first-child {
    border-top-left-radius: .45rem;
    border-bottom-left-radius: .45rem;
}

.input-group > :last-child {
    border-top-right-radius: .45rem;
    border-bottom-right-radius: .45rem;
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(13, 110, 253, .65);
    box-shadow: 0 0 0 .16rem rgba(13, 110, 253, .1);
}

.form-control-lg,
.form-select-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
    min-height: 40px;
    font-size: .88rem;
}

.btn {
    border-radius: .45rem;
    font-size: .78rem;
    font-weight: 600;
}

.btn-sm {
    font-size: .71rem;
}

.dropdown-menu {
    border-color: var(--app-border);
    border-radius: .55rem;
    box-shadow: var(--app-shadow);
    font-size: .78rem;
}

.alert {
    border-radius: .55rem;
    font-size: .8rem;
}

.quick-filter {
    border-radius: 999px;
}

/* Tables */
.table-card .table {
    margin-bottom: 0;
    font-size: .77rem;
}

.table-card .table thead th,
.table thead th {
    background: var(--app-surface-2);
    color: var(--bs-secondary-color);
    border-bottom-width: 1px;
    border-color: var(--app-border);
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: .58rem .65rem;
}

.table-card .table tbody td,
.table tbody td {
    padding: .62rem .65rem;
    border-color: var(--app-border);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-hover-bg: rgba(13, 110, 253, .045);
}

.ticket-link {
    color: var(--bs-emphasis-color);
    font-weight: 650;
    text-decoration: none;
}

.ticket-link:hover {
    color: #1682ff;
}

/* Status + priority */
.status-pill,
.priority-pill {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 650;
    line-height: 1;
    padding: .34rem .5rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-new { background: rgba(13, 110, 253, .11); color: #0a58ca; border-color: rgba(13, 110, 253, .17); }
.status-assigned { background: rgba(111, 66, 193, .11); color: #6f42c1; border-color: rgba(111, 66, 193, .17); }
.status-progress { background: rgba(13, 202, 240, .12); color: #087990; border-color: rgba(13, 202, 240, .2); }
.status-waiting { background: rgba(255, 193, 7, .15); color: #946200; border-color: rgba(255, 193, 7, .24); }
.status-resolved { background: rgba(25, 135, 84, .11); color: #146c43; border-color: rgba(25, 135, 84, .18); }
.status-closed { background: rgba(108, 117, 125, .13); color: var(--bs-secondary-color); border-color: rgba(108, 117, 125, .2); }
.status-cancelled { background: rgba(220, 53, 69, .10); color: #b02a37; border-color: rgba(220, 53, 69, .16); }
.status-neutral { background: var(--app-surface-2); color: var(--bs-secondary-color); border-color: var(--app-border); }

.priority-critical { background: rgba(220, 53, 69, .1); color: #b02a37; border-color: rgba(220, 53, 69, .16); }
.priority-high { background: rgba(253, 126, 20, .12); color: #b8550b; border-color: rgba(253, 126, 20, .2); }
.priority-medium { background: rgba(255, 193, 7, .14); color: #856404; border-color: rgba(255, 193, 7, .22); }
.priority-low { background: rgba(25, 135, 84, .1); color: #146c43; border-color: rgba(25, 135, 84, .17); }
.priority-neutral { background: var(--app-surface-2); color: var(--bs-secondary-color); border-color: var(--app-border); }

[data-bs-theme="dark"] .status-new { color: #8bb9ff; }
[data-bs-theme="dark"] .status-assigned { color: #c0a7f5; }
[data-bs-theme="dark"] .status-progress { color: #7edced; }
[data-bs-theme="dark"] .status-waiting { color: #f6d264; }
[data-bs-theme="dark"] .status-resolved { color: #75d6a6; }
[data-bs-theme="dark"] .status-cancelled { color: #f08b96; }
[data-bs-theme="dark"] .priority-critical { color: #f08b96; }
[data-bs-theme="dark"] .priority-high { color: #ffad70; }
[data-bs-theme="dark"] .priority-medium { color: #f6d264; }
[data-bs-theme="dark"] .priority-low { color: #75d6a6; }

.sla-overdue { color: var(--bs-danger); font-weight: 650; }
.sla-soon { color: #d69d00; font-weight: 650; }

/* Ticket details */
.avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
    color: var(--bs-secondary-color);
    font-size: .68rem;
    font-weight: 750;
    flex: 0 0 auto;
}

.avatar.avatar-lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: .82rem;
}

.ticket-hero {
    background: var(--app-surface);
    box-shadow: none;
}

.ticket-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .55rem;
}

.ticket-meta-item {
    padding: .58rem .65rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: var(--app-surface-2);
}

.ticket-meta-label {
    color: var(--bs-secondary-color);
    font-size: .61rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .18rem;
}

.timeline {
    position: relative;
}

.timeline-item {
    position: relative;
    padding-left: 2.7rem;
    padding-bottom: .9rem;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: .96rem;
    top: 2rem;
    bottom: 0;
    width: 1px;
    background: var(--app-border);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-avatar {
    position: absolute;
    left: 0;
    top: .05rem;
}

.timeline-body {
    border: 1px solid var(--app-border);
    border-radius: .55rem;
    padding: .72rem .8rem;
    background: var(--app-surface);
}

.timeline-body.internal-note {
    border-left: 3px solid var(--bs-warning);
    background: color-mix(in srgb, var(--bs-warning) 4%, var(--app-surface));
}

.sticky-panel {
    position: sticky;
    top: calc(var(--topbar-height) + 1rem);
}

/* Charts / empty states */
.chart-wrap {
    height: 245px;
}

.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--bs-secondary-color);
    font-size: .8rem;
}

.empty-state i {
    font-size: 1.7rem;
    opacity: .65;
}

/* Knowledge base */
.kb-card {
    height: 100%;
    transition: border-color .12s ease, transform .12s ease;
}

.kb-card:hover {
    transform: translateY(-1px);
    border-color: #3f91ff;
}

.kb-card .card-body {
    padding: .9rem;
}

.kb-impact {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--bs-secondary-color);
    font-size: .69rem;
    font-weight: 600;
}

.kb-impact strong {
    color: var(--bs-emphasis-color);
}

.kb-solved-by-me {
    color: #34b77a;
    font-size: .68rem;
    font-weight: 650;
}

.kb-insight-user {
    display: flex;
    align-items: center;
    gap: .55rem;
}

/* Login */
.login-shell {
    min-height: calc(100vh - var(--topbar-height));
    display: grid;
    place-items: center;
    padding: 2rem 0;
}

.login-card {
    width: min(100%, 430px);
    box-shadow: var(--app-shadow);
}

.min-w-0 { min-width: 0; }

@media (max-width: 1199.98px) {
    .app-main { padding-inline: 1rem; }
}

@media (max-width: 991.98px) {
    :root { --sidebar-width: 230px; }

    .app-topbar-brand { min-width: auto; }
    .app-sidebar {
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: 12px 0 30px rgba(0, 0, 0, .2);
    }
    .app-sidebar.open { transform: translateX(0); }
    .app-sidebar-backdrop {
        position: fixed;
        inset: var(--topbar-height) 0 0 0;
        z-index: 1025;
        background: rgba(0, 0, 0, .45);
    }
    .app-sidebar-backdrop.show { display: block; }
    .app-page { margin-left: 0; }
    .sticky-panel { position: static; }
}

@media (max-width: 575.98px) {
    .app-topbar-brand img { height: 36px; max-width: 92px; }
    .app-main { padding: .8rem .7rem 1rem; }
    .app-footer { padding-inline: .7rem; }
    .page-heading { margin-bottom: .75rem; }
    .chart-wrap { height: 220px; }
    .timeline-item { padding-left: 2.45rem; }
    .card-body { padding: .7rem; }
}