/* ================= ROOT ================= */

:root{

    --sidebar-width:270px;

    --color-bg:#f3f6fb;

    --color-card:#ffffff;

    --color-sidebar:#111827;

    --color-sidebar-soft:#1f2937;

    --color-primary:#2563eb;

    --color-primary-hover:#1d4ed8;

    --color-success:#16a34a;

    --color-warning:#f59e0b;

    --color-danger:#dc2626;

    --color-text:#111827;

    --color-text-soft:#6b7280;

    --color-border:#e5e7eb;

    --shadow-sm:
    0 1px 4px rgba(15,23,42,0.04);

    --shadow-md:
    0 4px 12px rgba(15,23,42,0.06);

    --radius-sm:10px;

    --radius-md:16px;

    --radius-lg:22px;

    --transition:
    color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

/* ================= BODY ================= */

html,
body{

    margin:0;

    padding:0;

    background:var(--color-bg);

    color:var(--color-text);

    font-family:'Inter',sans-serif;

    font-size:15px;

    overflow-x:hidden;

    -webkit-tap-highlight-color:transparent;

    text-rendering:optimizeSpeed;

    scrollbar-width:thin;

    scrollbar-color:rgba(148,163,184,0.42) transparent;
}

/* ================= APP ================= */

.app-layout{

    min-height:100vh;

    display:flex;
}

/* ================= CONTENT ================= */

.content-wrapper{

    flex:1;

    min-width:0;

    margin-left:var(--sidebar-width);

    display:flex;

    flex-direction:column;
}

/* ================= MAIN ================= */

.main-content{

    padding:24px;
}

/* ================= PAGE ================= */

.page-title{

    font-size:25px;

    font-weight:700;

    color:var(--color-text);

    margin:0;
}

/* ================= CARD ================= */

.card-box{

    background:var(--color-card);

    border-radius:var(--radius-md);

    padding:24px;

    box-shadow:var(--shadow-sm);

    border:1px solid rgba(229,231,235,0.7);
}

.transaction-input-block{

    background:linear-gradient(180deg, #fff7d6 0%, #fffdf2 100%);

    border:1px solid #facc15;

    box-shadow:0 12px 30px rgba(202,138,4,0.16);
}

.transaction-input-block .transaction-block-label{

    align-items:center;

    background:#fef3c7;

    border:1px solid #fde68a;

    border-radius:999px;

    color:#92400e;

    display:inline-flex;

    font-size:13px;

    font-weight:700;

    gap:6px;

    padding:5px 10px;

    text-transform:uppercase;
}

.transaction-input-block .form-control,
.transaction-input-block .form-select{

    background:#fff;

    border-color:#eab308;
}

/* ================= BUTTON ================= */

.btn{

    border-radius:12px;

    font-weight:600;

    transition:var(--transition);

    touch-action:manipulation;
}

.detail-card{

    padding:16px;

    border-radius:10px;
}

.detail-card .mb-3{

    margin-bottom:10px !important;
}

.detail-card .mb-4{

    margin-bottom:12px !important;
}

.detail-card h5{

    font-size:17px;
}

.profile-compact h3{

    font-size:23px;

    line-height:1.2;
}

.btn-profile-edit{

    padding:4px 8px;

    border-radius:8px;

    font-size:12px;
}

.btn-soft-action{

    background:#f8fafc;

    border-color:#e2e8f0;

    color:#64748b;
}

.btn-soft-action:hover{

    background:#eef2f7;

    border-color:#cbd5e1;

    color:#334155;
}

.btn-soft-danger{

    background:#fff7f7;

    border-color:#fee2e2;

    color:#b91c1c;
}

.btn-soft-danger:hover{

    background:#fee2e2;

    border-color:#fecaca;

    color:#991b1b;
}

.mobile-filter-toggle{

    display:none;
}

.mini-info-box{

    padding:10px 12px;

    border:1px solid rgba(229,231,235,0.7);

    border-radius:10px;

    background:#f8fafc;
}

.biodata-compact .biodata-item{

    min-height:54px;

    padding:10px 12px;

    border:1px solid rgba(229,231,235,0.7);

    border-radius:8px;

    background:#ffffff;
}

.biodata-two-col .row{

    row-gap:10px;
}

.biodata-two-col .biodata-item{

    min-height:68px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    border-color:#e2e8f0;

    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
}

.biodata-two-col .biodata-item .text-muted{

    margin-bottom:4px;

    color:#64748b !important;

    font-weight:800;

    letter-spacing:.01em;
}

.biodata-compact .fw-semibold{

    font-size:14px;

    line-height:1.35;

    overflow-wrap:anywhere;
}

@media(max-width:575.98px){

    .biodata-two-col .row{

        --bs-gutter-x:8px;

        --bs-gutter-y:8px;
    }

    .biodata-two-col .biodata-item{

        min-height:74px;

        padding:9px 10px;
    }

    .biodata-two-col .biodata-item .text-muted{

        font-size:11px;

        line-height:1.2;
    }

    .biodata-two-col .biodata-item .fw-semibold{

        font-size:13px;

        line-height:1.28;
    }
}

.btn-primary{

    background:var(--color-primary);

    border-color:var(--color-primary);
}

.btn-primary:hover{

    background:var(--color-primary-hover);

    border-color:var(--color-primary-hover);
}

/* ================= DASHBOARD ================= */

.dashboard-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:12px;
}

.dashboard-stat{

    display:flex;

    align-items:center;

    gap:14px;

    min-height:112px;

    padding:18px;

    background:#ffffff;

    border:1px solid rgba(229,231,235,0.8);

    border-radius:12px;

    box-shadow:var(--shadow-sm);
}

.dashboard-stat-icon{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    font-size:21px;
}

.dashboard-stat-label{

    color:#64748b;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;
}

.dashboard-stat-value{

    margin-top:2px;

    font-size:27px;

    line-height:1.1;

    font-weight:800;
}

.dashboard-stat-note{

    margin-top:4px;

    color:#64748b;

    font-size:13px;
}

.icon-blue{

    background:#eff6ff;

    color:#2563eb;
}

.icon-green{

    background:#ecfdf5;

    color:#059669;
}

.icon-amber{

    background:#fffbeb;

    color:#d97706;
}

.icon-red{

    background:#fff1f2;

    color:#e11d48;
}

.dashboard-panel{

    padding:18px;

    border-radius:12px;
}

.dashboard-panel-head{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:12px;
}

.dashboard-metrics{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:10px;

    margin-top:16px;
}

.dashboard-metric{

    min-height:82px;

    padding:14px;

    border:1px solid #e5e7eb;

    border-radius:10px;

    background:#f8fafc;
}

.dashboard-metric span{

    display:block;

    color:#64748b;

    font-size:13px;

    font-weight:600;
}

.dashboard-metric strong{

    display:block;

    margin-top:6px;

    color:#111827;

    font-size:25px;
}

.dashboard-shortcuts{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:10px;
}

.dashboard-shortcut{

    display:flex;

    align-items:center;

    gap:9px;

    min-height:46px;

    padding:10px 12px;

    border:1px solid #e5e7eb;

    border-radius:10px;

    color:#334155;

    background:#f8fafc;

    font-weight:700;
}

.dashboard-shortcut:hover{

    background:#eef2f7;

    color:#111827;
}

.dashboard-list{

    display:flex;

    flex-direction:column;

    gap:8px;
}

.dashboard-list-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    min-height:42px;

    padding:9px 11px;

    border:1px solid #e5e7eb;

    border-radius:10px;

    background:#ffffff;

    color:#334155;
}

.dashboard-list-row small{

    display:block;

    margin-top:2px;

    color:#94a3b8;

    font-size:12px;
}

.dashboard-list-row strong{

    font-size:19px;
}

.dashboard-list-row.link-row:hover{

    background:#f8fafc;

    color:#111827;
}

.dashboard-mini-panel{

    background:#f8fafc;

    border:1px solid #e5edf6;

    border-radius:12px;

    padding:14px;
}

.dashboard-workflow-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:12px;
}

.dashboard-workflow-card{

    display:flex;

    gap:12px;

    min-height:150px;

    padding:14px;

    border:1px solid #e5e7eb;

    border-radius:14px;

    background:#ffffff;

    color:#0f172a;

    text-decoration:none;

    transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.dashboard-workflow-card:hover{

    color:#0f172a;

    border-color:#cbd5e1;

    box-shadow:0 12px 26px rgba(15,23,42,.08);

    transform:translateY(-1px);
}

.dashboard-workflow-step{

    align-items:center;

    border-radius:999px;

    display:flex;

    flex:0 0 34px;

    font-size:15px;

    font-weight:900;

    height:34px;

    justify-content:center;

    width:34px;
}

.dashboard-workflow-body{

    display:flex;

    flex:1;

    flex-direction:column;

    min-width:0;
}

.dashboard-workflow-title{

    font-size:15px;

    font-weight:900;

    margin-bottom:5px;
}

.dashboard-workflow-text{

    color:#64748b;

    font-size:13px;

    line-height:1.45;
}

.dashboard-workflow-footer{

    align-items:center;

    display:flex;

    gap:8px;

    justify-content:space-between;

    margin-top:auto;

    padding-top:12px;
}

.dashboard-workflow-footer span{

    color:#64748b;

    font-size:13px;

    font-weight:800;
}

.dashboard-workflow-footer strong{

    color:#2563eb;

    font-size:13px;

    white-space:nowrap;
}

.workflow-blue .dashboard-workflow-step{
    background:#e0edff;
    color:#2563eb;
}

.workflow-amber .dashboard-workflow-step{
    background:#fff3d7;
    color:#b45309;
}

.workflow-red .dashboard-workflow-step{
    background:#fee2e2;
    color:#dc2626;
}

.workflow-green .dashboard-workflow-step{
    background:#dcfce7;
    color:#16a34a;
}

.dashboard-health-panel{
    background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
}

.dashboard-health-head{
    align-items:flex-start;
    display:flex;
    gap:14px;
    justify-content:space-between;
}

.dashboard-health-score{
    align-items:flex-end;
    color:#0f172a;
    display:flex;
    gap:3px;
    line-height:1;
    white-space:nowrap;
}

.dashboard-health-score strong{
    font-size:35px;
    font-weight:900;
}

.dashboard-health-score span{
    color:#64748b;
    font-size:14px;
    font-weight:800;
    padding-bottom:5px;
}

.dashboard-health-meter,
.dashboard-health-line{
    background:#e5e7eb;
    border-radius:999px;
    height:9px;
    overflow:hidden;
}

.dashboard-health-meter span,
.dashboard-health-line span{
    background:linear-gradient(90deg,#22c55e,#2563eb);
    border-radius:999px;
    display:block;
    height:100%;
}

.dashboard-health-list{
    display:grid;
    gap:12px;
}

.dashboard-health-row{
    align-items:flex-start;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    display:flex;
    gap:10px;
    padding:11px;
}

.dashboard-health-icon{
    align-items:center;
    background:#eef2ff;
    border-radius:8px;
    color:#2563eb;
    display:flex;
    flex:0 0 34px;
    height:34px;
    justify-content:center;
    width:34px;
}

.dashboard-health-body{
    flex:1;
    min-width:0;
}

/* ================= MOBILE LIST CARDS ================= */

.mobile-list-cards{

    display:none;
}

.mobile-work-card{

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-left:4px solid #2563eb;

    border-radius:8px;

    margin:10px 0;

    padding:12px;
}

.mobile-work-card-title{

    color:#0f172a;

    display:block;

    font-size:15px;

    font-weight:800;

    line-height:1.35;

    text-decoration:none;
}

.mobile-work-card-subtitle{

    color:#64748b;

    font-size:13px;

    line-height:1.35;

    margin-top:5px;
}

.mobile-work-card-meta{

    display:grid;

    gap:8px;

    grid-template-columns:repeat(2,minmax(0,1fr));

    margin-top:12px;
}

.mobile-work-card-tags{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-top:9px;
}

.mobile-work-meta-item{

    background:#f8fafc;

    border:1px solid #edf2f7;

    border-radius:10px;

    padding:9px;
}

.mobile-work-stats{

    display:grid;

    gap:6px;

    grid-template-columns:repeat(3,minmax(0,1fr));

    margin-top:10px;
}

.mobile-work-stat{

    background:#f8fafc;

    border-radius:7px;

    padding:7px 8px;
}

.mobile-work-stat-label{

    color:#64748b;

    font-size:11px;

    font-weight:800;

    line-height:1.2;
}

.mobile-work-stat-value{

    color:#0f172a;

    font-size:13px;

    font-weight:800;

    line-height:1.25;

    margin-top:3px;
}

.mobile-work-meta-label{

    color:#64748b;

    font-size:12px;

    font-weight:700;

    margin-bottom:3px;
}

.mobile-work-meta-value{

    color:#0f172a;

    font-size:14px;

    font-weight:700;

    line-height:1.35;
}

.mobile-work-progress{

    margin-top:12px;
}

.mobile-work-progress-head{

    align-items:center;

    display:flex;

    justify-content:space-between;

    gap:10px;

    font-size:13px;

    font-weight:800;
}

.mobile-work-progress-bar{

    background:#e5e7eb;

    border-radius:999px;

    height:8px;

    margin-top:7px;

    overflow:hidden;
}

.mobile-work-progress-fill{

    background:#2563eb;

    border-radius:999px;

    height:100%;
}

.mobile-work-card-actions{

    display:grid;

    gap:8px;

    grid-template-columns:1fr 1fr;

    margin-top:13px;
}

.mobile-work-card-actions form{

    margin:0;
}

.mobile-work-card-actions form:first-child{

    grid-column:1 / -1;
}

.mobile-work-card-actions .btn{

    justify-content:center;
}

.mobile-work-card-actions .btn:first-child{

    grid-column:1 / -1;
}

.dashboard-health-title{
    align-items:center;
    display:flex;
    font-size:14px;
    font-weight:900;
    gap:10px;
    justify-content:space-between;
}

.dashboard-health-line{
    height:6px;
    margin-top:7px;
}

.dashboard-health-note{
    color:#64748b;
    font-size:12px;
    line-height:1.35;
    margin-top:6px;
}

.dashboard-quality-grid{
    display:grid;
    gap:10px;
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.dashboard-quality-item{
    align-items:flex-start;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    color:#0f172a;
    display:flex;
    gap:12px;
    justify-content:space-between;
    min-height:74px;
    padding:12px;
}

.dashboard-quality-item:hover{
    background:#f8fafc;
    color:#0f172a;
}

.dashboard-quality-item span{
    display:flex;
    flex-direction:column;
    font-size:14px;
    font-weight:900;
    gap:4px;
    min-width:0;
}

.dashboard-quality-item small{
    color:#64748b;
    font-size:12px;
    font-weight:700;
    line-height:1.35;
}

.dashboard-quality-item strong{
    align-items:center;
    background:#fff7ed;
    border-radius:999px;
    color:#c2410c;
    display:flex;
    flex:0 0 auto;
    font-size:14px;
    font-weight:900;
    justify-content:center;
    min-width:34px;
    padding:6px 9px;
}

.program-nav-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:10px;
}

.program-nav-card{

    display:flex;

    align-items:flex-start;

    gap:10px;

    min-height:64px;

    padding:10px 12px;

    border:1px solid #e5e7eb;

    border-radius:8px;

    background:#ffffff;

    color:#334155;

    box-shadow:var(--shadow-sm);
}

.program-nav-card:hover{

    color:#111827;

    background:#f8fafc;
}

.program-nav-card.active{

    border-color:rgba(37,99,235,0.35);

    background:#eff6ff;
}

.program-nav-icon{

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 32px;

    border-radius:8px;

    background:#eef2f7;

    color:#2563eb;

    font-size:16px;
}

.program-nav-title{

    font-size:14px;

    font-weight:800;
}

.program-nav-text{

    margin-top:2px;

    color:#64748b;

    font-size:12px;

    line-height:1.35;
}

.program-flow-card{

    padding:14px;

    border:1px solid #dbeafe;

    border-radius:10px;

    background:#f8fbff;

    box-shadow:var(--shadow-sm);
}

.program-flow-title{

    margin-bottom:10px;

    color:#0f172a;

    font-size:14px;

    font-weight:900;
}

.program-flow-steps{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:8px;
}

.program-flow-step{

    min-height:74px;

    padding:10px 12px;

    border:1px solid #e5e7eb;

    border-radius:8px;

    background:#ffffff;
}

.program-flow-step span{

    display:block;

    margin-bottom:5px;

    color:#1f2937;

    font-size:13px;

    font-weight:900;
}

.program-flow-step small{

    display:block;

    color:#64748b;

    font-size:12px;

    line-height:1.35;
}

.program-flow-step.active{

    border-color:#2563eb;

    background:#eff6ff;
}

/* ================= BADGE ================= */

.badge{

    border-radius:999px;

    padding:6px 10px;

    font-size:12px;

    font-weight:600;
}

/* ================= LINK ================= */

a{

    text-decoration:none;
}

/* ================= WOW WORKSPACE MODES ================= */

.mode-ribbon{

    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-bottom:8px;

    padding:6px 10px;

    border-radius:999px;

    border:1px solid #dbeafe;

    background:#eff6ff;

    color:#2563eb;

    font-size:12px;

    font-weight:800;
}

.mode-ribbon.input{

    border-color:#bbf7d0;

    background:#f0fdf4;

    color:#15803d;
}

.mode-ribbon.analysis{

    border-color:#fde68a;

    background:#fffbeb;

    color:#b45309;
}

.wow-summary-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:12px;
}

.wow-summary-card{

    min-height:96px;

    padding:14px;

    border:1px solid rgba(226,232,240,.9);

    border-radius:12px;

    background:#fff;
}

.wow-summary-label{

    color:#64748b;

    font-size:12px;

    font-weight:800;

    text-transform:uppercase;
}

.wow-summary-value{

    margin-top:8px;

    color:#0f172a;

    font-size:24px;

    font-weight:900;

    line-height:1.1;
}

.wow-summary-note{

    margin-top:6px;

    color:#64748b;

    font-size:12px;
}

.wow-mobile-cards{

    display:none;
}

.wow-mobile-card{

    border:1px solid rgba(226,232,240,.9);

    border-radius:12px;

    background:#fff;

    padding:12px;
}

.wow-mobile-card + .wow-mobile-card{

    margin-top:10px;
}

.wow-mobile-title{

    color:#0f172a;

    font-weight:900;

    line-height:1.35;
}

.wow-mobile-meta{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:8px;

    margin-top:10px;
}

.wow-mobile-meta div{

    min-width:0;

    padding:8px;

    border-radius:9px;

    background:#f8fafc;
}

.wow-mobile-meta .wow-mobile-meta-wide{

    grid-column:1 / -1;
}

.wow-mobile-meta span{

    display:block;

    color:#64748b;

    font-size:11px;

    font-weight:800;
}

.wow-mobile-meta strong{

    display:block;

    color:#0f172a;

    font-size:13px;

    overflow-wrap:anywhere;
}

.wow-mobile-clamp{

    display:-webkit-box !important;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;
}

.wow-mobile-card-actions{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:10px;
}

.detail-mobile-cards{

    display:none;
}

.detail-mobile-card{

    border:1px solid rgba(226,232,240,0.95);

    border-radius:14px;

    background:#ffffff;

    padding:13px;

    box-shadow:0 6px 16px rgba(15,23,42,0.04);
}

.detail-mobile-card + .detail-mobile-card{

    margin-top:10px;
}

.detail-mobile-card.is-muted{

    opacity:.62;

    background:#f8fafc;
}

.detail-mobile-card-head{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:10px;

    margin-bottom:11px;
}

.detail-mobile-title{

    color:#0f172a;

    font-size:15px;

    font-weight:800;

    line-height:1.32;

    overflow-wrap:anywhere;
}

.detail-mobile-title a{

    color:#0d6efd;

    text-decoration:none;
}

.detail-mobile-subtitle{

    margin-top:3px;

    color:#64748b;

    font-size:12px;

    line-height:1.35;
}

.detail-mobile-actions{

    display:flex;

    align-items:center;

    gap:6px;

    flex-shrink:0;
}

.detail-mobile-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:8px;
}

.detail-mobile-grid > div{

    min-height:56px;

    padding:9px 10px;

    border-radius:12px;

    background:#f8fafc;
}

.detail-mobile-grid span{

    display:block;

    margin-bottom:4px;

    color:#64748b;

    font-size:11px;

    font-weight:800;

    line-height:1.2;
}

.detail-mobile-grid strong{

    display:block;

    color:#0f172a;

    font-size:13px;

    line-height:1.28;

    overflow-wrap:anywhere;
}

.detail-mobile-empty{

    padding:14px;

    border:1px dashed #cbd5e1;

    border-radius:12px;

    color:#64748b;

    font-size:13px;

    text-align:center;

    background:#f8fafc;
}

.wow-timeline{

    display:grid;

    gap:10px;
}

.wow-timeline-item{

    position:relative;

    padding:10px 12px 10px 18px;

    border:1px solid #e5e7eb;

    border-left:4px solid #2563eb;

    border-radius:10px;

    background:#fff;
}

.wow-timeline-item.is-muted{

    border-left-color:#cbd5e1;

    background:#f8fafc;
}

.wow-workflow-strip{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:10px;
}

.wow-workflow-step{

    padding:12px;

    border:1px solid #e5e7eb;

    border-radius:12px;

    background:#fff;
}

.wow-workflow-step.is-active{

    border-color:#2563eb;

    background:#eff6ff;
}

.wow-workflow-step.is-done{

    border-color:#bbf7d0;

    background:#f0fdf4;
}

.wow-workflow-step span{

    display:block;

    color:#0f172a;

    font-size:13px;

    font-weight:900;
}

.wow-workflow-step small{

    display:block;

    margin-top:5px;

    color:#64748b;

    font-size:12px;

    line-height:1.35;
}

/* ================= SCROLLBAR ================= */

::-webkit-scrollbar{

    width:5px;

    height:6px;
}

::-webkit-scrollbar-thumb{

    background:rgba(148,163,184,0.34);

    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{

    background:rgba(100,116,139,0.5);
}

::-webkit-scrollbar-track{

    background:transparent;
}