/* ─────────────────────────────────────────────
   People Management — Custom Styles
   Extends Bootstrap 5 with sidebar layout
───────────────────────────────────────────── */

:root {
    --sidebar-width:           240px;
    --sidebar-collapsed-width: 60px;
    --sidebar-bg:              #1e2a3a;
    --sidebar-hover:           #2d3f55;
    --sidebar-active:          #0d6efd;
    --sidebar-text:            #c8d6e5;
    --sidebar-muted:           #7a94ad;
    --sidebar-border:          rgba(255,255,255,0.07);
    --mobile-topbar-height:    52px;

    --pm-primary:              #0d6efd;
    --pm-body-bg:              #f0f2f5;
    --pm-card-radius:          0.75rem;
    --pm-btn-radius:           0.375rem;
    --pm-transition:           0.18s ease;

    /* Table */
    --pm-table-header-bg:      #f8f9fa;
    --pm-table-header-text:    #64748b;
    --pm-table-hover-bg:       rgba(13, 110, 253, 0.04);
    --pm-table-cell-py:        0.7rem;
    --pm-table-cell-px:        1rem;
    --pm-table-header-transform: uppercase;
    --pm-table-font-size:      inherit;
    --pm-table-header-size:    inherit;
}

/* ── Reset / Base ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    display:          flex;
    min-height:       100vh;
    margin:           0;
    background-color: var(--pm-body-bg);
    font-family:      'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size:        0.9375rem;
    color:            #1e293b;
    overflow-x:       hidden;
}

/* ── Mobile top bar ── */
.mobile-topbar {
    position:    fixed;
    top:         0;
    left:        0;
    right:       0;
    height:      var(--mobile-topbar-height);
    background:  var(--sidebar-bg);
    z-index:     1100;
    display:     none;
}

.mobile-topbar .btn-link {
    color:       var(--sidebar-text) !important;
    text-decoration: none;
}

/* ── Sidebar ── */
#sidebar {
    width:           var(--sidebar-width);
    height:          100vh;
    background:      var(--sidebar-bg);
    display:         flex;
    flex-direction:  column;
    position:        fixed;
    top:             0;
    left:            0;
    z-index:         1050;
    overflow-x:      hidden;
    overflow-y:      hidden;
    transition:      width 0.25s ease;
    flex-shrink:     0;
}

body.sidebar-collapsed #sidebar {
    width: var(--sidebar-collapsed-width);
}

/* Sidebar Header */
.sidebar-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1rem 0.9rem 1rem 1rem;
    border-bottom:   1px solid var(--sidebar-border);
    flex-shrink:     0;
    min-height:      64px;
    overflow:        hidden;
}

.sidebar-brand {
    display:         flex;
    align-items:     center;
    gap:             0.6rem;
    text-decoration: none;
    color:           #fff;
    font-weight:     700;
    font-size:       1.05rem;
    white-space:     nowrap;
    overflow:        hidden;
    min-width:       0;
}

.sidebar-brand-icon {
    font-size:   1.35rem;
    flex-shrink: 0;
    color:       var(--sidebar-active);
}

.sidebar-brand-text {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    transition:    opacity 0.2s, width 0.2s;
}

body.sidebar-collapsed .sidebar-brand-text {
    opacity: 0;
    width:   0;
}

.sidebar-collapse-btn {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    width:           100%;
    padding:         0.45rem 0.35rem;
    margin-bottom:   0.5rem;
    background:      transparent;
    border:          none;
    border-bottom:   1px solid var(--sidebar-border);
    padding-bottom:  0.6rem;
    margin-bottom:   0.6rem;
    color:           var(--sidebar-muted);
    cursor:          pointer;
    border-radius:   0;
    font-size:       0.875rem;
    font-weight:     500;
    white-space:     nowrap;
    overflow:        hidden;
    transition:      color 0.15s, background 0.15s;
}

.sidebar-collapse-btn:hover {
    color:       #fff;
    background:  var(--sidebar-hover);
}

body.sidebar-collapsed .sidebar-collapse-btn {
    justify-content: center;
    gap:             0;
}

/* Sidebar Nav */
.sidebar-nav {
    flex:       1;
    overflow-y: auto;
    overflow-x: hidden;
    padding:    0.5rem 0;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background:    rgba(255,255,255,0.15);
    border-radius: 2px;
}

.sidebar-section-label {
    font-size:      0.68rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--sidebar-muted);
    padding:        0.85rem 1rem 0.3rem;
    white-space:    nowrap;
    overflow:       hidden;
    transition:     opacity 0.2s;
}

body.sidebar-collapsed .sidebar-section-label {
    opacity:    0;
    padding-top: 0.5rem;
    padding-bottom: 0.1rem;
    font-size:  0;
}

.sidebar-link {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    padding:         0.55rem 1rem;
    color:           var(--sidebar-text);
    text-decoration: none;
    font-size:       0.9rem;
    font-weight:     500;
    white-space:     nowrap;
    border-left:     3px solid transparent;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
    overflow:        hidden;
}

.sidebar-link:hover {
    background: var(--sidebar-hover);
    color:      #fff;
}

.sidebar-link.active {
    background:   rgba(13, 110, 253, 0.18);
    color:        #fff;
    border-left-color: var(--sidebar-active);
}

.sidebar-link-icon {
    font-size:   1.05rem;
    flex-shrink: 0;
    width:       1.2rem;
    text-align:  center;
}

.sidebar-link-text {
    overflow:      hidden;
    text-overflow: ellipsis;
    transition:    opacity 0.2s, width 0.2s;
}

body.sidebar-collapsed .sidebar-link-text,
body.sidebar-collapsed .sidebar-section-label {
    opacity:    0;
    width:      0;
    overflow:   hidden;
}

body.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding-left:    0;
    padding-right:   0;
}

/* Tooltips for collapsed mode */
body.sidebar-collapsed .sidebar-link {
    position: relative;
}

body.sidebar-collapsed .sidebar-link::after {
    content:     attr(data-label);
    position:    absolute;
    left:        calc(var(--sidebar-collapsed-width) + 8px);
    background:  #1e2a3a;
    color:       #fff;
    padding:     0.3rem 0.7rem;
    border-radius: 0.35rem;
    font-size:   0.82rem;
    white-space: nowrap;
    opacity:     0;
    pointer-events: none;
    transition:  opacity 0.15s;
    z-index:     9999;
    box-shadow:  0 2px 8px rgba(0,0,0,0.3);
}

body.sidebar-collapsed .sidebar-link:hover::after {
    opacity: 1;
}

/* Sidebar Footer */
.sidebar-footer {
    border-top:    1px solid var(--sidebar-border);
    padding:       0.75rem;
    flex-shrink:   0;
    overflow:      hidden;
}

.sidebar-user {
    display:         flex;
    align-items:     center;
    gap:             0.65rem;
    padding:         0.45rem 0.35rem;
    border-radius:   0.5rem;
    text-decoration: none;
    color:           var(--sidebar-text);
    transition:      background 0.15s;
    overflow:        hidden;
    white-space:     nowrap;
    margin-bottom:   0.35rem;
}

.sidebar-user:hover {
    background: var(--sidebar-hover);
    color:      #fff;
}

.sidebar-user-avatar {
    font-size:   1.5rem;
    flex-shrink: 0;
    line-height: 1;
}

.sidebar-user-info {
    overflow:   hidden;
    min-width:  0;
    transition: opacity 0.2s, width 0.2s;
}

.sidebar-user-name {
    display:       block;
    font-size:     0.875rem;
    font-weight:   600;
    overflow:      hidden;
    text-overflow: ellipsis;
    color:         #fff;
}

.sidebar-user-role {
    display:    block;
    font-size:  0.72rem;
    color:      var(--sidebar-muted);
    margin-top: -1px;
}

body.sidebar-collapsed .sidebar-user-info {
    opacity: 0;
    width:   0;
    overflow: hidden;
}

body.sidebar-collapsed .sidebar-user {
    justify-content: center;
}

.sidebar-logout {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    padding:         0.45rem 0.35rem;
    border-radius:   0.5rem;
    text-decoration: none;
    color:           var(--sidebar-muted);
    font-size:       0.875rem;
    font-weight:     500;
    transition:      background 0.15s, color 0.15s;
    white-space:     nowrap;
    overflow:        hidden;
}

.sidebar-logout:hover {
    background: rgba(220, 53, 69, 0.15);
    color:      #ff6b7a;
}

body.sidebar-collapsed .sidebar-logout {
    justify-content: center;
}

body.sidebar-collapsed .sidebar-logout .sidebar-link-text {
    opacity:  0;
    width:    0;
    overflow: hidden;
}

/* ── Main Content ── */
#main-content {
    margin-left: var(--sidebar-width);
    flex:        1;
    padding:     1.75rem 2rem;
    min-width:   0;
    transition:  margin-left 0.25s ease;
}

body.sidebar-collapsed #main-content {
    margin-left: var(--sidebar-collapsed-width);
}

body.no-sidebar #main-content {
    margin-left: 0;
}

/* Rota fullscreen: hide sidebar, reclaim full width */
body.rota-fullscreen #sidebar {
    display: none;
}
body.rota-fullscreen #main-content {
    margin-left: 0;
}

/* ── Sidebar Overlay (mobile) ── */
.sidebar-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.5);
    z-index:    1040;
}

.sidebar-overlay.active {
    display: block;
}

/* ── Mobile Responsive ── */
@media (max-width: 767.98px) {
    .mobile-topbar {
        display: flex !important;
    }

    body {
        display: block;
    }

    #sidebar {
        top:       var(--mobile-topbar-height);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width:     var(--sidebar-width) !important;
        height:    calc(100vh - var(--mobile-topbar-height));
    }

    #sidebar.mobile-open {
        transform: translateX(0);
    }

    #main-content {
        margin-left:  0 !important;
        margin-top:   var(--mobile-topbar-height);
        padding:      1rem;
    }

    body.sidebar-collapsed #main-content {
        margin-left: 0 !important;
    }

    body.sidebar-collapsed .sidebar-brand-text,
    body.sidebar-collapsed .sidebar-link-text,
    body.sidebar-collapsed .sidebar-section-label,
    body.sidebar-collapsed .sidebar-user-info,
    body.sidebar-collapsed .sidebar-logout .sidebar-link-text {
        opacity:  1 !important;
        width:    auto !important;
        overflow: visible !important;
    }

    body.sidebar-collapsed .sidebar-link {
        justify-content: flex-start;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    body.sidebar-collapsed .sidebar-user {
        justify-content: flex-start;
    }

    body.sidebar-collapsed .sidebar-logout {
        justify-content: flex-start;
    }

    body.sidebar-collapsed .sidebar-collapse-btn {
        justify-content: flex-start;
        gap: 0.75rem;
    }
}

/* ── Cards ── */
.card {
    border-radius: var(--pm-card-radius);
    transition:    box-shadow var(--pm-transition);
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

.card-header {
    border-radius: var(--pm-card-radius) var(--pm-card-radius) 0 0 !important;
    padding:       1rem 1.25rem 0.75rem;
}

/* ── Stat cards ── */
.stat-card .card-body {
    padding: 1.25rem;
}

.stat-icon {
    width:           52px;
    height:          52px;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

/* ── Tables ── */
.table {
    font-size: var(--pm-table-font-size, 0.9rem);
}

.table thead th {
    font-weight:    600;
    font-size:      var(--pm-table-header-size, 0.8125rem);
    text-transform: var(--pm-table-header-transform);
    letter-spacing: 0.04em;
    color:          var(--pm-table-header-text);
    border-bottom-width: 1px;
    padding:        calc(var(--pm-table-cell-py) - 0.05rem) var(--pm-table-cell-px);
}

.table thead.table-light th {
    background-color: var(--pm-table-header-bg) !important;
}

.table tbody td {
    padding:          var(--pm-table-cell-py) var(--pm-table-cell-px);
    vertical-align:   middle;
}

.table-hover tbody tr:hover {
    background-color: var(--pm-table-hover-bg);
}

/* ── Table style variants (applied via body class) ── */
body.table-style-striped .table tbody tr:nth-child(odd) {
    background-color: rgba(0,0,0,0.02);
}

body.table-style-bordered .table {
    border: 1px solid #dee2e6;
}
body.table-style-bordered .table th,
body.table-style-bordered .table td {
    border: 1px solid #dee2e6;
}

body.table-style-borderless .table th,
body.table-style-borderless .table td {
    border-color: transparent;
}

/* ── Buttons ── */
.btn {
    font-weight:    500;
    letter-spacing: 0.01em;
    border-radius:  var(--pm-btn-radius);
}

.btn-xs {
    padding:       0.15rem 0.4rem;
    font-size:     0.75rem;
    border-radius: 0.25rem;
}

/* ── Forms ── */
.form-control,
.form-select {
    border-color:  #cbd5e1;
    border-radius: 0.5rem;
    font-size:     0.9375rem;
    transition:    border-color var(--pm-transition), box-shadow var(--pm-transition);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pm-primary);
    box-shadow:   0 0 0 0.2rem rgba(13,110,253,0.15);
}

.form-label {
    font-size:    0.875rem;
    margin-bottom: 0.35rem;
    color:        #374151;
}

/* ── Badges ── */
.badge {
    font-weight:    500;
    letter-spacing: 0.02em;
    padding:        0.35em 0.65em;
}

/* ── Breadcrumb ── */
.breadcrumb {
    font-size: 0.875rem;
}

.breadcrumb-item a {
    color:           var(--pm-primary);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* ── Alerts (flash messages) ── */
.alert {
    border-left-width:   4px;
    border-top-width:    1px;
    border-right-width:  1px;
    border-bottom-width: 1px;
    border-radius:       0.5rem;
}

.alert-success { border-left-color: #198754; }
.alert-danger  { border-left-color: #dc3545; }
.alert-info    { border-left-color: #0dcaf0; }
.alert-warning { border-left-color: #ffc107; }

/* ── Dropdown ── */
.dropdown-menu {
    border-radius: 0.6rem;
    box-shadow:    0 8px 24px rgba(0,0,0,0.12);
    border-color:  #e2e8f0;
    font-size:     0.9rem;
    padding:       0.4rem 0;
}

.dropdown-item {
    padding:    0.45rem 1.1rem;
    transition: background-color var(--pm-transition);
}

/* ── Input group ── */
.input-group-text {
    background-color: #f8fafc;
    border-color:     #cbd5e1;
    color:            #64748b;
}

/* ── Week Calendar (shift schedule) ── */
.week-calendar th,
.week-calendar td {
    padding: 0.5rem;
}

.week-calendar th {
    text-align: center;
}

/* ── Monospace ── */
.font-monospace {
    letter-spacing: 0.05em;
}

/* ── Health dashboard (dark theme cards) ── */
.health-card {
    background:    #1e2a3a;
    color:         #c8d6e5;
    border-radius: var(--pm-card-radius);
    border:        1px solid rgba(255,255,255,0.08);
}

.health-card .card-header {
    background:   rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color:        #fff;
}

.health-card .table {
    color: #c8d6e5;
}

.health-card .table thead th {
    color:        #7a94ad;
    border-color: rgba(255,255,255,0.1);
}

.health-card .table tbody td {
    border-color: rgba(255,255,255,0.06);
}

.health-card .table-hover tbody tr:hover {
    background-color: rgba(255,255,255,0.04);
    color:            #fff;
}

/* ── Leave status badges ── */
.badge-pending  { background: #ffc107; color: #000; }
.badge-approved { background: #198754; color: #fff; }
.badge-rejected { background: #dc3545; color: #fff; }
.badge-cancelled { background: #6c757d; color: #fff; }

/* ── AI analysis ── */
.ai-response-content {
    font-size:   0.9rem;
    line-height: 1.65;
    max-height:  600px;
    overflow-y:  auto;
    padding:     0.25rem 0;
}

.ai-response-content ul {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
}

.ai-response-content li {
    margin-bottom: 0.15rem;
}

/* ── Responsive tweaks ── */
@media (max-width: 575.98px) {
    #main-content {
        padding: 1rem 0.75rem;
    }

    .card-body {
        padding: 1rem;
    }

    .btn-group .btn {
        padding-left:  0.5rem;
        padding-right: 0.5rem;
    }
}