/* ===================================================================
   Workspace Organizer — style.css
   Modern, polished UI. Indigo primary, amber accent.
   =================================================================== */

/* ----- Design tokens ----- */
:root {
    /* Brand */
    --primary:        #4f46e5;        /* indigo-600 */
    --primary-dark:   #4338ca;
    --primary-darker: #3730a3;
    --primary-light:  #e0e7ff;
    --primary-glow:   rgba(79, 70, 229, 0.4);
    --accent:         #f59e0b;
    --accent-dark:    #d97706;
    --accent-light:   #fef3c7;

    --gradient-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --gradient-accent:  linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --gradient-bg:      linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);

    /* Status */
    --success:        #10b981;
    --success-bg:     #d1fae5;
    --success-dark:   #047857;
    --danger:         #ef4444;
    --danger-bg:      #fee2e2;
    --danger-dark:    #b91c1c;
    --warning:        #f59e0b;
    --warning-bg:     #fef3c7;
    --warning-dark:   #b45309;
    --info:           #0ea5e9;
    --info-bg:        #e0f2fe;
    --info-dark:      #0369a1;

    /* Neutrals */
    --bg:             #f8fafc;
    --bg-dim:         #f1f5f9;
    --surface:        #ffffff;
    --surface-2:      #f8fafc;
    --surface-3:      #f1f5f9;
    --border:         #e2e8f0;
    --border-strong:  #cbd5e1;
    --text:           #0f172a;
    --text-muted:     #64748b;
    --text-soft:      #94a3b8;

    /* Sidebar */
    --sidebar-bg:     #0b1437;
    --sidebar-bg-2:   #131c4a;
    --sidebar-text:   #e0e7ff;
    --sidebar-muted:  #818cf8;
    --sidebar-hover:  rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: rgba(99, 102, 241, 0.2);

    /* Layout */
    --sidebar-w:      250px;
    --topbar-h:       64px;
    --radius:         10px;
    --radius-sm:      6px;
    --radius-lg:      14px;
    --radius-xl:      20px;

    /* Shadows */
    --shadow-xs:      0 1px 2px rgba(15,23,42,.04);
    --shadow-sm:      0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow:         0 4px 6px -1px rgba(15,23,42,.06), 0 2px 4px -1px rgba(15,23,42,.03);
    --shadow-md:      0 10px 15px -3px rgba(15,23,42,.07), 0 4px 6px -2px rgba(15,23,42,.03);
    --shadow-lg:      0 20px 25px -5px rgba(15,23,42,.08), 0 10px 10px -5px rgba(15,23,42,.02);
    --shadow-glow:    0 0 0 4px rgba(79, 70, 229, 0.15);

    /* Easing */
    --ease:           cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- Reset ----- */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; }
body {
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--primary); text-decoration: none; transition: color .15s var(--ease); }
a:hover { color: var(--primary-dark); }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .85em;
       background: var(--surface-3); padding: .15em .4em; border-radius: 4px;
       color: var(--primary-darker); }
pre { font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--surface-3);
      padding: .75rem; border-radius: var(--radius); overflow-x: auto;
      font-size: .85em; }
hr { border: none; border-top: 1px solid var(--border); margin: 1.25rem 0; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }
.small { font-size: .85em; }
.muted { color: var(--text-muted); }
.text-soft { color: var(--text-soft); }
.text-danger { color: var(--danger-dark); }
.text-success { color: var(--success-dark); }
.text-warning { color: var(--warning-dark); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.float-right { float: right; }
.inline { display: inline-block; }

/* ----- Layout ----- */
.app {
    display: flex;
    min-height: 100vh;
}

/* ----- Sidebar ----- */
.sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
    color: var(--sidebar-text);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    transition: transform .3s var(--ease);
    box-shadow: var(--shadow-lg);
    z-index: 50;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.brand {
    padding: 1.5rem 1.25rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: .5rem;
}
.brand h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.brand .ver {
    color: var(--sidebar-muted);
    font-size: .7rem;
    margin-top: .25rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.nav-group {
    padding: .25rem 0 .75rem;
}
.nav-group-title {
    color: var(--sidebar-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: .5rem 1.25rem .35rem;
    opacity: 0.7;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--sidebar-text);
    padding: .55rem 1rem .55rem 1.25rem;
    margin: .1rem .6rem;
    border-radius: var(--radius);
    font-size: .9rem;
    font-weight: 500;
    transition: all .15s var(--ease);
    position: relative;
}
.nav-link:hover {
    background: var(--sidebar-hover);
    color: #ffffff;
    transform: translateX(2px);
}
.nav-link.active {
    background: var(--sidebar-active-bg);
    color: #ffffff;
    font-weight: 600;
}
.nav-link.active::before {
    content: '';
    position: absolute;
    left: -0.6rem;
    top: 25%;
    bottom: 25%;
    width: 3px;
    background: linear-gradient(180deg, #818cf8, #c084fc);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 8px var(--primary-glow);
}
.nav-icon {
    font-size: 1rem;
    display: inline-flex;
    width: 22px;
    justify-content: center;
}

/* ----- Main area ----- */
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-h);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 40;
}
.page-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}
.sidebar-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--text);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.user-info { text-align: right; line-height: 1.3; }
.user-info .name { font-weight: 600; font-size: .9rem; color: var(--text); }
.user-info .role { margin-top: .15rem; }
.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px var(--primary-glow);
    border: 2px solid white;
    cursor: default;
    user-select: none;
}
.user-menu > a {
    padding: .5rem .85rem;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 500;
    border: 1px solid var(--border);
    transition: all .15s var(--ease);
    background: white;
}
.user-menu > a:hover {
    color: var(--danger-dark);
    border-color: var(--danger);
    background: var(--danger-bg);
}

.content {
    padding: 1.75rem 2rem;
    flex: 1;
    max-width: 100%;
}

/* ----- Page header ----- */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-header h1 {
    font-size: 1.65rem;
    font-weight: 700;
    margin: 0 0 .25rem;
    color: var(--text);
    letter-spacing: -0.02em;
}
.page-header p { margin: 0; color: var(--text-muted); font-size: .92rem; }
.header-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ----- Card ----- */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: box-shadow .2s var(--ease);
}
.card:hover { box-shadow: var(--shadow); }
.card-header {
    padding: 1rem 1.25rem .85rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(248,250,252,0.5) 0%, transparent 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.card-header h2, .card-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}
.card-header h2 { font-size: 1.05rem; }
.card > :not(.card-header):not(table):not(.data-table) { padding: 1rem 1.25rem; }
.card > .card-header + :not(.card-header):not(table) { padding-top: 1rem; }
.card-header + .data-table { margin-top: 0; }
.card .prose { padding: 1rem 1.25rem !important; }

/* Grid layout */
.grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.grid-2col > * { margin-bottom: 0; }
@media (max-width: 900px) {
    .grid-2col { grid-template-columns: 1fr; }
}

/* ----- Stat grid (dashboard / reports) ----- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.stat-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    transition: transform .15s var(--ease), box-shadow .2s var(--ease);
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient-primary);
}
.stat-card.primary::before { background: var(--gradient-primary); }
.stat-card.success::before { background: linear-gradient(135deg, #10b981, #059669); }
.stat-card.warning::before { background: var(--gradient-accent); }
.stat-card.info::before    { background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.stat-card.danger::before  { background: linear-gradient(135deg, #ef4444, #dc2626); }

.stat-card .label {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: .35rem;
}
.stat-card .value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: .25rem;
    letter-spacing: -0.02em;
}
.stat-card.success .value { color: var(--success-dark); }
.stat-card.warning .value { color: var(--warning-dark); }
.stat-card.danger  .value { color: var(--danger-dark); }
.stat-card.info    .value { color: var(--info-dark); }
.stat-card .delta {
    font-size: .8rem;
    color: var(--text-muted);
}

/* ----- Buttons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border-radius: var(--radius);
    font-size: .88rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s var(--ease);
    line-height: 1.2;
    font-family: inherit;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-glow);
}
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 2px 8px var(--primary-glow);
}
.btn-primary:hover {
    box-shadow: 0 4px 14px var(--primary-glow);
    color: white;
}
.btn-outline {
    background: white;
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-outline:hover {
    background: var(--surface-2);
    border-color: var(--primary);
    color: var(--primary);
}
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}
.btn-ghost:hover {
    background: var(--surface-3);
    color: var(--text);
}
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(239,68,68,0.4);
}
.btn-danger:hover {
    color: white;
    box-shadow: 0 4px 14px rgba(239,68,68,0.5);
}
.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16,185,129,0.4);
}
.btn-success:hover { color: white; box-shadow: 0 4px 14px rgba(16,185,129,0.5); }
.btn[disabled],.btn:disabled {
    opacity: .5; cursor: not-allowed; transform: none !important;
}

/* ----- Forms ----- */
.form-vertical label,
.filter-form label,
form label {
    display: block;
    font-weight: 500;
    color: var(--text);
    font-size: .85rem;
    margin-bottom: 1rem;
}
.form-vertical label > input:not([type=checkbox]):not([type=radio]),
.form-vertical label > select,
.form-vertical label > textarea,
form label > input:not([type=checkbox]):not([type=radio]),
form label > select,
form label > textarea {
    margin-top: .25rem;
}
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=datetime-local],
input[type=tel], input[type=url], input[type=search],
select, textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: .9rem;
    font-family: inherit;
    background: white;
    color: var(--text);
    transition: all .15s var(--ease);
    line-height: 1.4;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-glow);
}
input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-2);
    cursor: not-allowed;
}
textarea { resize: vertical; min-height: 80px; }
select { cursor: pointer; }

.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > .half { flex: 1; min-width: 0; }
.form-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.form-error {
    color: var(--danger-dark);
    font-size: .85rem;
    margin-top: .25rem;
}
.req { color: var(--danger); margin-left: .15rem; }
.hint {
    display: block;
    color: var(--text-muted);
    font-size: .8rem;
    margin-top: .25rem;
    font-weight: 400;
}
.inline-check {
    display: inline-flex !important;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}
.inline-check input[type=checkbox] { width: auto; }
input[type=checkbox], input[type=radio] {
    accent-color: var(--primary);
    width: 16px; height: 16px;
    cursor: pointer;
}

.filter-form {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.filter-form label { margin-bottom: 0; }
.filter-form input[type=text],
.filter-form input[type=date],
.filter-form select { min-width: 140px; width: auto; }
.inline-form {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ----- Tables ----- */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .88rem;
}
.data-table thead th {
    text-align: left;
    padding: .65rem .85rem;
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    position: sticky;
    top: 0;
}
.data-table thead th:first-child { padding-left: 1.25rem; }
.data-table thead th:last-child { padding-right: 1.25rem; }
.data-table tbody td {
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}
.data-table tbody td:first-child { padding-left: 1.25rem; }
.data-table tbody td:last-child { padding-right: 1.25rem; }
.data-table tbody tr {
    transition: background .12s var(--ease);
}
.data-table tbody tr:hover {
    background: var(--surface-2);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td.empty {
    text-align: center;
    color: var(--text-soft);
    padding: 2.5rem 1rem;
    font-style: italic;
}
.link-strong {
    font-weight: 600;
    color: var(--primary-darker);
}
.link-strong:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ----- Badges ----- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0.01em;
}
.badge.small { padding: .1rem .4rem; font-size: .65rem; }

/* Role badges */
.badge-role-superadmin,
.role-superadmin {
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    color: #9d174d;
}
.badge-role-admin,
.role-admin {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
}
.badge-role-manager,
.role-manager {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
    color: #5b21b6;
}
.badge-role-user,
.role-user {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
}
.badge-role-guest,
.role-guest {
    background: var(--surface-3);
    color: var(--text-muted);
}

/* Priority badges (P1=highest=red → P5=lowest=gray) */
.badge-prio-1 { background: #fecaca; color: #7f1d1d; font-weight: 700; }
.badge-prio-2 { background: #fed7aa; color: #7c2d12; }
.badge-prio-3 { background: #fde68a; color: #78350f; }
.badge-prio-4 { background: #bfdbfe; color: #1e3a8a; }
.badge-prio-5 { background: #e2e8f0; color: #475569; }

/* Overall status badges */
.badge-status-new         { background: #dbeafe; color: #1e40af; }
.badge-status-in_progress { background: #fef3c7; color: #92400e; }
.badge-status-pending     { background: #e0e7ff; color: #3730a3; }
.badge-status-done        { background: #d1fae5; color: #065f46; }
.badge-status-close       { background: #e2e8f0; color: #334155; }

/* Unit status badges */
.badge-unit-pending      { background: #e0e7ff; color: #3730a3; }
.badge-unit-acknowledged { background: #fef3c7; color: #92400e; }
.badge-unit-in_progress  { background: #fde68a; color: #78350f; }
.badge-unit-blocked      { background: #fee2e2; color: #991b1b; }
.badge-unit-review       { background: #ddd6fe; color: #5b21b6; }
.badge-unit-done         { background: #d1fae5; color: #065f46; }
.badge-unit-skipped      { background: #f1f5f9; color: #64748b; }
.badge-unit-deferred     { background: #e0f2fe; color: #075985; }
.badge-unit-cancelled    { background: #fee2e2; color: #991b1b; }

/* Severity badges */
.badge-sev-1 { background: #fecaca; color: #7f1d1d; font-weight: 700; }
.badge-sev-2 { background: #fed7aa; color: #7c2d12; }
.badge-sev-3 { background: #fde68a; color: #78350f; }
.badge-sev-4 { background: #bfdbfe; color: #1e3a8a; }
.badge-sev-5 { background: #e2e8f0; color: #475569; }

/* Issue status */
.badge-istatus-open                 { background: #dbeafe; color: #1e40af; }
.badge-istatus-in_progress          { background: #fef3c7; color: #92400e; }
.badge-istatus-pending_verification { background: #fde68a; color: #78350f; }
.badge-istatus-resolved             { background: #d1fae5; color: #065f46; }
.badge-istatus-closed               { background: #e2e8f0; color: #334155; }

/* Agenda category */
.cat-rapat       { background: #dbeafe; color: #1e40af; }
.cat-pekerjaan   { background: #fde68a; color: #78350f; }
.cat-pribadi     { background: #fce7f3; color: #9d174d; }
.cat-cuti        { background: #d1fae5; color: #065f46; }
.cat-perjalanan  { background: #e0f2fe; color: #075985; }
.cat-pelatihan   { background: #ddd6fe; color: #5b21b6; }
.cat-acara       { background: #fed7aa; color: #7c2d12; }
.cat-lainnya     { background: #e2e8f0; color: #475569; }

/* Agenda status */
.badge-astatus-open      { background: #dbeafe; color: #1e40af; }
.badge-astatus-ongoing   { background: #fef3c7; color: #92400e; }
.badge-astatus-completed { background: #d1fae5; color: #065f46; }
.badge-astatus-cancelled { background: #fee2e2; color: #991b1b; }

/* Resource status */
.badge-rstatus-available   { background: #d1fae5; color: #065f46; }
.badge-rstatus-maintenance { background: #fef3c7; color: #92400e; }
.badge-rstatus-retired     { background: #e2e8f0; color: #475569; }

/* Meeting status */
.badge-mstatus-scheduled   { background: #dbeafe; color: #1e40af; }
.badge-mstatus-in_progress { background: #fef3c7; color: #92400e; }
.badge-mstatus-completed   { background: #d1fae5; color: #065f46; }
.badge-mstatus-cancelled   { background: #fee2e2; color: #991b1b; }

/* RSVP */
.badge-rsvp-pending   { background: #e2e8f0; color: #475569; }
.badge-rsvp-accept    { background: #d1fae5; color: #065f46; }
.badge-rsvp-tentative { background: #fef3c7; color: #92400e; }
.badge-rsvp-decline   { background: #fee2e2; color: #991b1b; }

/* Attendance */
.badge-att-attended { background: #d1fae5; color: #065f46; }
.badge-att-absent   { background: #fee2e2; color: #991b1b; }
.badge-att-late     { background: #fef3c7; color: #92400e; }

/* Workflow type */
.badge-wftype-surat_masuk  { background: #dbeafe; color: #1e40af; }
.badge-wftype-surat_keluar { background: #d1fae5; color: #065f46; }
.badge-wftype-request      { background: #fef3c7; color: #92400e; }
.badge-wftype-disposisi    { background: #fce7f3; color: #9d174d; }

/* Workflow status */
.badge-wfstatus-open        { background: #dbeafe; color: #1e40af; }
.badge-wfstatus-in_progress { background: #fef3c7; color: #92400e; }
.badge-wfstatus-pending     { background: #e0e7ff; color: #3730a3; }
.badge-wfstatus-wf_end      { background: #d1fae5; color: #065f46; }
.badge-wfstatus-cancelled   { background: #fee2e2; color: #991b1b; }

/* Delegation */
.badge-dst-pending   { background: #fef3c7; color: #92400e; }
.badge-dst-approved  { background: #d1fae5; color: #065f46; }
.badge-dst-rejected  { background: #fee2e2; color: #991b1b; }
.badge-dst-cancelled { background: #e2e8f0; color: #475569; }
.badge-dst-expired   { background: #e0e7ff; color: #3730a3; }

/* Generic status colors */
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info    { background: #e0f2fe; color: #075985; }
.badge-muted   { background: #e2e8f0; color: #475569; }

/* SLA colors */
.sla-ok     { color: #065f46; }
.sla-soon   { color: #92400e; font-weight: 600; }
.sla-breach { color: #991b1b; font-weight: 700; }
.sla-na     { color: #64748b; }

/* ----- Flash messages ----- */
.flash {
    padding: .85rem 1.1rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-size: .9rem;
    font-weight: 500;
    border: 1px solid;
    display: flex;
    align-items: center;
    gap: .6rem;
    animation: slideDown .35s var(--ease);
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.flash-success { background: var(--success-bg); color: var(--success-dark); border-color: #6ee7b7; }
.flash-success::before { content: '✓'; font-weight: 700; }
.flash-error   { background: var(--danger-bg);  color: var(--danger-dark);  border-color: #fca5a5; }
.flash-error::before   { content: '✕'; font-weight: 700; }
.flash-warn    { background: var(--warning-bg); color: var(--warning-dark); border-color: #fcd34d; }
.flash-warn::before    { content: '⚠'; font-weight: 700; }
.flash-info    { background: var(--info-bg);    color: var(--info-dark);    border-color: #7dd3fc; }
.flash-info::before    { content: 'ℹ'; font-weight: 700; }
.alert {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    border: 1px solid;
    font-size: .9rem;
}
.alert-error   { background: var(--danger-bg);  color: var(--danger-dark);  border-color: #fca5a5; }
.alert-success { background: var(--success-bg); color: var(--success-dark); border-color: #6ee7b7; }
.alert-warn    { background: var(--warning-bg); color: var(--warning-dark); border-color: #fcd34d; }
.alert-info    { background: var(--info-bg);    color: var(--info-dark);    border-color: #7dd3fc; }
.alert ul { margin: .35rem 0 0; padding-left: 1.25rem; }

/* ----- Pagination ----- */
.pagination {
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
}
.pager { display: flex; gap: .4rem; }

/* ----- Login page ----- */
.login-page {
    min-height: 100vh;
    background: var(--gradient-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}
.login-page::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
    top: -200px;
    right: -200px;
    border-radius: 50%;
    z-index: 0;
}
.login-page::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
    bottom: -150px;
    left: -150px;
    border-radius: 50%;
    z-index: 0;
}
.login-box {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    padding: 2.5rem 2rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 1;
    animation: loginIn .5s var(--ease);
}
@keyframes loginIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.login-box h1 {
    margin: 0 0 .35rem;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}
.login-box .sub {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    font-size: .9rem;
}
.login-box .form-group {
    margin-bottom: 1rem;
}
.login-box label {
    display: block;
    font-weight: 500;
    font-size: .85rem;
    margin-bottom: .35rem;
}
.login-box input {
    padding: .65rem .85rem;
}
.login-box .btn-primary {
    width: 100%;
    padding: .7rem;
    font-size: .95rem;
    margin-top: .5rem;
}

/* ----- Task / detail meta grid ----- */
.task-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .85rem 1.25rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, var(--surface-2) 0%, transparent 100%);
}
.task-meta > div {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .9rem;
}
.task-meta .muted {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ----- Prose ----- */
.prose h4 {
    font-size: .95rem;
    font-weight: 600;
    margin: 0 0 .5rem;
    color: var(--text);
}
.prose p {
    margin: 0 0 .75rem;
    color: var(--text);
    line-height: 1.6;
}

/* ----- Comments thread ----- */
.comments {
    padding: 0 1.25rem;
}
.comment {
    padding: .85rem 1rem;
    background: var(--surface-2);
    border-radius: var(--radius);
    margin-bottom: .5rem;
    border-left: 3px solid var(--primary);
}
.comment-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    flex-wrap: wrap;
}
.comment-body {
    color: var(--text);
    white-space: pre-wrap;
    font-size: .9rem;
    line-height: 1.55;
}
.comment-form { padding: 1rem 1.25rem; background: var(--surface-2); }

/* ----- Change log ----- */
.change-log-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.change-log-list li {
    padding: .55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: .85rem;
    line-height: 1.6;
}
.change-log-list li:last-child { border-bottom: none; }

/* ----- Attachment list ----- */
.attach-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.attach-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all .15s var(--ease);
}
.attach-item:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    transform: translateX(2px);
}
.attach-icon { font-size: 1.5rem; flex-shrink: 0; }
.attach-info { flex: 1; min-width: 0; overflow: hidden; }
.attach-info > a {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ----- Workflow timeline ----- */
.wf-timeline {
    list-style: none;
    padding: 1rem 1.25rem;
    margin: 0;
}
.wf-step {
    display: flex;
    gap: 1rem;
    padding: .85rem 0;
    border-left: 2px solid var(--border);
    margin-left: 1rem;
    padding-left: 1.5rem;
    position: relative;
}
.wf-step:first-child { padding-top: .25rem; }
.wf-step:last-child  { border-left-color: transparent; }

.wf-step-marker {
    position: absolute;
    left: -1.1rem;
    top: .6rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    font-weight: 700;
    border: 3px solid white;
    box-shadow: 0 0 0 1px var(--border-strong);
    flex-shrink: 0;
}
.wf-step-done .wf-step-marker {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 0 0 1px #047857, 0 2px 8px rgba(16, 185, 129, 0.4);
}
.wf-step-current .wf-step-marker {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 0 0 1px var(--primary-dark), 0 2px 8px var(--primary-glow);
    animation: pulse 1.8s infinite;
}
.wf-step-pending .wf-step-marker {
    background: white;
    color: var(--text-muted);
}
@keyframes pulse {
    0%,100% { box-shadow: 0 0 0 1px var(--primary-dark), 0 0 0 0 var(--primary-glow); }
    50%     { box-shadow: 0 0 0 1px var(--primary-dark), 0 0 0 8px transparent; }
}

.wf-step-body { flex: 1; min-width: 0; }
.wf-step-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: .5rem; flex-wrap: wrap;
    margin-bottom: .2rem;
}
.wf-step-times {
    font-size: .8rem;
    margin-top: .15rem;
    color: var(--text-muted);
}
.wf-step-notes {
    margin-top: .5rem;
    padding: .55rem .75rem;
    background: var(--primary-light);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: .85rem;
    white-space: pre-wrap;
    color: var(--primary-darker);
}

.badge-wfstep-done    { background: #d1fae5; color: #065f46; }
.badge-wfstep-current { background: #ddd6fe; color: #5b21b6; }
.badge-wfstep-pending { background: #e2e8f0; color: #475569; }

/* Route step editor */
.route-step {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .85rem;
    margin-bottom: .65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}
.route-step .step-num {
    flex-shrink: 0;
    width: 90px;
    font-weight: 600;
    color: var(--primary);
    padding-top: .5rem;
    font-size: .85rem;
}
.route-step .step-fields {
    flex: 1;
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 2fr;
    gap: .5rem;
    min-width: 0;
}
.route-step .step-fields > label { margin: 0; font-size: .8rem; }
.route-step .remove-step { flex-shrink: 0; margin-top: .5rem; }
@media (max-width: 900px) {
    .route-step { flex-direction: column; }
    .route-step .step-fields { grid-template-columns: 1fr 1fr; }
}

/* ----- Week grid (agenda) ----- */
.week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .5rem;
    padding: 1rem 1.25rem;
}
.week-day {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    min-height: 140px;
    padding: .55rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.week-day-head {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--border);
}
.week-day-today {
    background: var(--primary-light);
    border-color: var(--primary);
}
.week-day-today .week-day-head { color: var(--primary-darker); }
.week-day-item {
    font-size: .75rem;
    padding: .25rem .4rem;
    background: white;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
    line-height: 1.3;
}
.week-day-item a { color: var(--text); font-weight: 500; }
@media (max-width: 900px) {
    .week-grid { grid-template-columns: 1fr; }
}

/* ----- Report hub grid ----- */
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .85rem;
    padding: 1rem 1.25rem;
}
.report-card {
    display: block;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: inherit;
    transition: all .15s var(--ease);
    position: relative;
    overflow: hidden;
}
.report-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--gradient-primary);
    transform: scaleY(0);
    transition: transform .2s var(--ease);
    transform-origin: top;
}
.report-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: inherit;
}
.report-card:hover::before {
    transform: scaleY(1);
}
.report-code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .72rem;
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: .35rem;
}
.report-name {
    font-weight: 600;
    color: var(--text);
    font-size: .95rem;
}

/* KV list */
.kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .65rem 1.25rem;
    padding: 1rem 1.25rem;
}
.kv > div {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-size: .9rem;
}
.kv .muted {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ----- Responsive ----- */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
    .content { padding: 1rem; }
    .topbar { padding: 0 1rem; }
    .user-info { display: none; }
    .page-header h1 { font-size: 1.3rem; }
    .stat-card .value { font-size: 1.6rem; }
    .data-table { font-size: .8rem; }
    .data-table thead th, .data-table tbody td { padding: .55rem .65rem; }
}

@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr; }
    .filter-form input[type=text],
    .filter-form select { width: 100%; }
}

/* ----- Print friendliness ----- */
@media print {
    .sidebar, .topbar, .header-actions, .form-actions, .pagination { display: none !important; }
    .content { padding: 0; }
    .card { box-shadow: none; border: 1px solid var(--border); }
}


/* Login logo */
.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.login-logo svg {
    filter: drop-shadow(0 8px 16px rgba(79, 70, 229, 0.3));
}
.login-box .form-error {
    background: var(--danger-bg);
    color: var(--danger-dark);
    padding: .65rem .85rem;
    border-radius: var(--radius);
    border-left: 3px solid var(--danger);
    font-size: .85rem;
    margin-bottom: 1rem;
}

/* Dashboard welcome banner */
.welcome-banner {
    background: var(--gradient-primary);
    color: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 30px -10px var(--primary-glow);
    position: relative;
    overflow: hidden;
}
.welcome-banner::before {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
    border-radius: 50%;
}
.welcome-content { position: relative; z-index: 1; }
.welcome-content h1 {
    margin: 0 0 .35rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.02em;
}
.welcome-content p {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: .92rem;
}
.welcome-content .badge {
    background: rgba(255,255,255,0.25) !important;
    color: white !important;
    backdrop-filter: blur(8px);
}
.welcome-deco {
    position: relative;
    z-index: 1;
    opacity: 0.6;
}
@media (max-width: 600px) {
    .welcome-deco { display: none; }
    .welcome-content h1 { font-size: 1.2rem; }
}

/* Button row (dashboard quick actions) */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 1rem 1.25rem !important;
}

/* btn-accent for admin actions */
.btn-accent {
    background: var(--gradient-accent);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.btn-accent:hover {
    color: white;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.5);
}

/* ----- Legacy class aliases (for admin pages using `.data` / `.filter-bar`) ----- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
}
table.data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .88rem;
    margin: 0;
}
table.data thead th {
    text-align: left;
    padding: .65rem .85rem;
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
}
table.data thead th:first-child { padding-left: 1.25rem; }
table.data thead th:last-child { padding-right: 1.25rem; }
table.data tbody td {
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}
table.data tbody td:first-child { padding-left: 1.25rem; }
table.data tbody td:last-child { padding-right: 1.25rem; }
table.data tbody tr {
    transition: background .12s var(--ease);
}
table.data tbody tr:hover {
    background: var(--surface-2);
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data .actions { text-align: right; white-space: nowrap; }
table.data td.empty,
.data .empty {
    text-align: center;
    color: var(--text-soft);
    padding: 2.5rem 1rem;
    font-style: italic;
}

/* filter-bar (admin pages — inline horizontal form) */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    padding: .85rem 1.25rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.filter-bar input[type=text],
.filter-bar input[type=search],
.filter-bar input[type=date],
.filter-bar select {
    flex: 0 1 auto;
    width: auto;
    min-width: 160px;
    padding: .45rem .65rem;
    font-size: .85rem;
}
.filter-bar input[type=text].grow,
.filter-bar input[type=search].grow {
    flex: 1 1 240px;
    min-width: 240px;
}
.filter-bar button,
.filter-bar a.btn {
    padding: .45rem .85rem;
    font-size: .85rem;
}
.filter-bar label {
    margin: 0 !important;
    font-size: .82rem;
    color: var(--text-muted);
}

/* Misc small helpers used by admin pages */
.actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .85rem 1.25rem;
    gap: .5rem;
    flex-wrap: wrap;
}
.you-badge {
    display: inline-block;
    background: var(--accent-light);
    color: var(--warning-dark);
    padding: .1rem .45rem;
    border-radius: 100px;
    font-size: .7rem;
    font-weight: 600;
    margin-left: .35rem;
}


/* List group (assignments page sidebar) */
.list-group {
    list-style: none;
    padding: 0;
    margin: 0;
}
.list-group .list-item {
    display: block;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    transition: all .12s var(--ease);
}
.list-group .list-item:hover {
    background: var(--surface-2);
}
.list-group .list-item.active {
    background: var(--primary-light);
    color: var(--primary-darker);
    border-left: 3px solid var(--primary);
    padding-left: calc(.85rem - 3px);
}
.list-group .list-item:last-child { border-bottom: none; }
.list-title {
    font-weight: 600;
    color: var(--text);
}
.list-group .list-item.active .list-title { color: var(--primary-darker); }

/* Empty state */
.empty-state {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--text-soft);
}
.empty-state .icon {
    font-size: 2.5rem;
    margin-bottom: .5rem;
    opacity: 0.5;
}

/* Row form (inline edit row) */
.row-form {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .85rem 1.25rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.row-form input,
.row-form select {
    padding: .45rem .65rem;
    font-size: .85rem;
    width: auto;
    flex: 1;
    min-width: 150px;
}

/* Chevron arrow indicator */
.chev {
    color: var(--text-soft);
    font-size: .8rem;
}

/* Generic badges (admin-page convenience) */
.badge-primary { background: var(--primary-light); color: var(--primary-darker); }


/* Make admin tables scrollable horizontally on narrow viewports */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-wrap table.data { min-width: 700px; }
table.data .actions { white-space: nowrap; }
table.data td .btn-sm { margin-left: .15rem; }

/* Compact filter-bar inputs */
.filter-bar input[type=text],
.filter-bar input[type=search] { min-width: 200px; max-width: 280px; }
.filter-bar select { min-width: 140px; }