/* ── Layout ──────────────────────────────────────────────────────────────────── */
:root {
    --sidebar-width: 240px;
    --topbar-height: 56px;
    --sidebar-bg: #1a2340;
    --sidebar-link-color: #c8cfe0;
    --sidebar-link-hover: #ffffff;
    --sidebar-active-bg: rgba(255,255,255,.12);
    --dmj-gold: #ffb81c;
    --dmj-orange: #f28c28;
    --dmj-gold-text: #1a2340;
}

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body.portal-layout {
    display: flex !important;
    min-height: 100vh;
    width: 100% !important;
    max-width: 100vw !important;
    background: #f4f6fb;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
}

body.portal-layout * {
    box-sizing: border-box;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1000;
    overflow-y: auto;
}

.sidebar-header { border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-logo   { height: 48px; width: auto; object-fit: contain; border-radius: 4px; }
.sidebar-brand  { color: #fff; font-weight: 700; font-size: 1rem; margin-top: 4px; }

.sidebar-link {
    color: var(--sidebar-link-color) !important;
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: .875rem;
    transition: background .15s, color .15s;
}
.sidebar-link:hover  { background: rgba(255,255,255,.08); color: var(--sidebar-link-hover) !important; }
.sidebar-link.active { background: var(--sidebar-active-bg); color: #fff !important; font-weight: 600; }

.sidebar-footer { color: #8899bb; }

.btn-signout {
    background: linear-gradient(135deg, var(--dmj-gold) 0%, var(--dmj-orange) 100%);
    border-color: var(--dmj-gold);
    color: var(--dmj-gold-text);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(255,184,28,.28);
}

.btn-signout:hover,
.btn-signout:focus,
.btn-signout:active {
    background: linear-gradient(135deg, var(--dmj-orange) 0%, var(--dmj-gold) 100%);
    border-color: var(--dmj-orange);
    color: var(--dmj-gold-text);
    box-shadow: 0 4px 12px rgba(242,140,40,.35);
}

.dashboard-card {
    transition: transform .15s ease, box-shadow .15s ease;
    cursor: pointer;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.08) !important;
}

/* Main */
.main-wrapper {
    margin-left: var(--sidebar-width) !important;
    width: calc(100% - var(--sidebar-width)) !important;
    max-width: calc(100vw - var(--sidebar-width)) !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh;
    min-width: 0 !important;
    overflow: hidden !important;
}

.topbar {
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid #e5e9f0;
    position: sticky;
    top: 0;
    z-index: 900;
}

.page-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.page-content .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

.page-content .table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    min-width: 0 !important;
}

.page-content .table th,
.page-content .table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Auth layout */
.auth-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

/* Responsive */
@media (max-width: 991px) {
    .sidebar     { transform: translateX(-100%); transition: transform .25s; }
    .sidebar.show { transform: translateX(0); }
    .main-wrapper { margin-left: 0; }
}