/* ================================================
   ระบบรายงานการปฏิบัติงานวิถีใหม่
   Color palette: forest green theme
================================================ */

:root {
    --green-900: #0f3d28;
    --green-800: #145238;
    --green-700: #1e6f4d;
    --green-600: #2d9068;
    --green-500: #3fa87c;
    --green-100: #e8f3ed;
    --green-50:  #f4faf6;

    --blue-500:  #3a8dde;
    --teal-500:  #14a89a;
    --amber-500: #f3a712;
    --red-500:   #dc3545;
    --gray-100:  #f4f7f5;
    --gray-200:  #eceeeb;
    --gray-600:  #6c757d;
    --text-primary: #1e2a25;
}

* { box-sizing: border-box; }

body {
    font-family: 'Sarabun', 'Segoe UI', -apple-system, sans-serif;
    background: var(--gray-100);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

/* ============== NAVBAR ============== */
.app-navbar {
    background: #ffffff;
    border-bottom: 2px solid var(--green-700);
    padding: 10px 0;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.app-navbar .brand {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--text-primary);
}
.app-navbar .brand-check {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--green-700); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.brand-title { display: block; font-size: 18px; font-weight: 700; color: var(--green-800); }
.brand-subtitle { display: block; font-size: 12px; color: var(--gray-600); }
.nav-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 6px;
    background: white; color: var(--green-800);
    border: 1px solid var(--green-100);
    text-decoration: none; font-weight: 500; font-size: 14px;
    transition: .15s;
}
.nav-btn:hover { background: var(--green-50); border-color: var(--green-500); color: var(--green-700); }
.nav-btn.active { background: var(--green-700); color: white; border-color: var(--green-700); }

/* ============== MAIN & HERO ============== */
.app-main { padding: 24px 0 40px; min-height: calc(100vh - 140px); }

.form-hero {
    position: relative;
    background: linear-gradient(135deg, var(--green-700) 0%, var(--green-800) 100%);
    border-radius: 10px;
    color: white;
    padding: 22px 28px;
    margin-bottom: 18px;
    overflow: hidden;
}
.form-hero-inner h2 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.form-hero-inner p  { font-size: 13px; margin: 0; opacity: .9; }
.form-hero-deco {
    position: absolute; right: -40px; top: -40px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18) 0%, transparent 70%);
}

/* ============== CARD SECTION (FORM) ============== */
.card-section {
    background: white;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.sec-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    background: var(--green-50);
    border-bottom: 1px solid var(--green-100);
}
.sec-head i { color: var(--green-700); font-size: 20px; }
.sec-head .sec-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--green-700); color: white; font-weight: 700; font-size: 13px;
}
.sec-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--green-800); }
.sec-body { padding: 20px; }

/* ============== FORM ELEMENTS ============== */
.form-label { font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 4px; }
.form-control, .form-select {
    border: 1px solid #d6dcd8; border-radius: 6px;
    padding: 8px 12px; font-size: 14px; font-family: inherit;
}
.form-control:focus, .form-select:focus {
    border-color: var(--green-500);
    box-shadow: 0 0 0 .2rem rgba(63,168,124,.18);
}
.form-check-input:checked {
    background-color: var(--green-700);
    border-color: var(--green-700);
}

/* ============== TASK TABLE ============== */
.task-table { font-size: 13px; }
.task-table thead th {
    background: var(--green-100); color: var(--green-800);
    font-weight: 600; border: 1px solid var(--green-100);
    white-space: nowrap;
}
.task-table tbody td { vertical-align: top; border-color: var(--gray-200); }
.task-table .seq { text-align: center; font-weight: 600; color: var(--green-700); }
.task-table textarea, .task-table input, .task-table select {
    font-size: 13px !important; padding: 6px 10px !important;
}

.btn-add, .btn-attach {
    background: white; color: var(--green-700);
    border: 1px dashed var(--green-500);
    padding: 8px 14px; font-size: 13px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-add:hover, .btn-attach:hover { background: var(--green-50); border-style: solid; }

.file-list { display: flex; flex-wrap: wrap; gap: 6px; }
.file-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--green-50); color: var(--green-800);
    border: 1px solid var(--green-100);
    padding: 4px 10px; border-radius: 20px; font-size: 12px;
}
.file-chip .rm { cursor: pointer; color: var(--red-500); }

/* ============== ACTION BAR ============== */
.action-bar {
    display: flex; gap: 10px; justify-content: center;
    padding: 20px 0 10px;
}
.btn-primary-green {
    background: var(--green-700); color: white;
    border: 1px solid var(--green-700);
    font-weight: 500;
}
.btn-primary-green:hover {
    background: var(--green-800); border-color: var(--green-800); color: white;
}

/* ============== FILTER BAR (DASHBOARD) ============== */
.filter-bar {
    background: white; border-radius: 10px;
    padding: 14px 18px; margin-bottom: 14px;
    border: 1px solid var(--gray-200);
}
.filter-bar label { margin-bottom: 2px; }

/* ============== KPI CARDS ============== */
.kpi {
    background: white; border-radius: 10px;
    padding: 18px 20px;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--green-700);
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    transition: .18s;
    height: 100%;
}
.kpi:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.kpi-green { border-left-color: var(--green-700); }
.kpi-blue  { border-left-color: var(--blue-500); }
.kpi-teal  { border-left-color: var(--teal-500); }
.kpi-amber { border-left-color: var(--amber-500); }
.kpi-label { font-size: 13px; color: var(--gray-600); margin-bottom: 6px; }
.kpi-value { font-size: 32px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.kpi-sub   { font-size: 12px; color: var(--gray-600); margin-top: 2px; }

/* ============== CHART CARDS ============== */
.chart-card {
    background: white; border-radius: 10px;
    border: 1px solid var(--gray-200);
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
    height: 100%;
}
.chart-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-200);
}
.chart-head h5 {
    margin: 0; font-size: 15px; font-weight: 600; color: var(--green-800);
    display: flex; align-items: center; gap: 8px;
}
.chart-body { padding: 16px; min-height: 280px; position: relative; }
.chart-body canvas { max-height: 320px; }
/* เมื่อ chart-body ห่อตาราง ไม่ต้องเผื่อที่สำหรับ canvas */
.chart-body.p-0 { min-height: 0; }
.chart-body.p-0 .recent-table { margin-bottom: 0; }

/* ============== RECENT TABLE ============== */
.recent-table { font-size: 13px; margin-bottom: 0; }
.recent-table thead th {
    background: var(--green-50); color: var(--green-800);
    font-weight: 600; border-color: var(--green-100);
    text-transform: none; font-size: 13px;
    white-space: nowrap;
}
.recent-table tbody td { vertical-align: middle; border-color: var(--gray-200); }
.recent-table tbody tr:hover { background: var(--green-50); }

/* ============== PILLS / BADGES ============== */
.pill {
    display: inline-block;
    padding: 3px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 500;
    white-space: nowrap;
}
.pill-green-soft { background: var(--green-50); color: var(--green-800); border: 1px solid var(--green-100); }
.pill-saved      { background: var(--green-100); color: var(--green-800); border: 1px solid var(--green-500); }
.pill-sat-5 { background: var(--green-700); color: white; }
.pill-sat-4 { background: var(--green-500); color: white; }
.pill-sat-3 { background: var(--amber-500); color: white; }
.pill-sat-2 { background: #ff8c42; color: white; }
.pill-sat-1 { background: var(--red-500); color: white; }

/* ============== FOOTER ============== */
.app-footer {
    background: white;
    border-top: 1px solid var(--gray-200);
    padding: 18px 0;
    color: var(--gray-600);
    font-size: 12px;
}

/* ============== UTILITIES ============== */
@media (max-width: 768px) {
    .app-navbar .container-xl { flex-direction: column; gap: 10px; }
    .brand-title { font-size: 16px; }
    .form-hero-inner h2 { font-size: 15px; }
    .kpi-value { font-size: 26px; }
}