/*
 * ธีมหน้าเว็บ — ที่เดียวที่กำหนดสี/รัศมี/เงา/ฟอนต์
 * รุ่นปัจจุบัน: "Dew Ledger" (26 ต.ค. 2569, ขั้น 1 ของการปรับธีม; แนวคิด/จานสี/mockup อยู่ใน docs/design) พื้นกระดาษครีม การ์ดขาวอุ่น เขียวป่าเป็นสีหลัก ทองเป็นจุดเน้นเล็กๆ
 * ชื่อตัวแปร --nv-* คงเดิมทุกตัว (ค่าเปลี่ยนเท่านั้น) view/ไฟล์ CSS อื่นจึงไม่ต้องแก้ · ตัวแปรสีกราฟ --nv-chart-* ไม่เปลี่ยน (หน้าสภาพอากาศปรับแยกภายหลัง)
 * ไม่โหลดทรัพยากรภายนอก (ฟอนต์ระบบเท่านั้น) · คอนทราสต์ตัวหนังสือหลักทุกคู่ ≥ 4.5:1 (ops/test_theme_css.py ตรวจ)
 * ย้อนกลับ: ส่ง theme.css/layout.css เดิมทับ (สำรองไว้ที่ /root/backup-theme1 ตอน deploy) หรือ git checkout phase3-SCHED-3 -- navagarden/yii2-app/web/css
 */
:root {
    --nv-green-900: #172e24;
    --nv-green-800: #1f3a2e;   /* เขียวป่า: หัวข้อ/โลโก้/ตัวอักษรเน้น */
    --nv-green-700: #2b6a47;   /* เขียวสถานะ/ลิงก์ */
    --nv-green-600: #5c8d70;   /* เส้นโฟกัส/ขอบ hover */
    --nv-green-500: #8fa48c;   /* เสจ */
    --nv-green-200: #d6ded0;   /* มิสต์ */
    --nv-green-100: #e7ece1;
    --nv-green-50: #f0f1e6;
    --nv-btn: #2b6a47;         /* ปุ่มหลัก (ตัวหนังสือขาว 6.45:1) */
    --nv-btn-hover: #235a3b;
    --nv-orange-600: #8a5a12;  /* ข้อความเตือน (บน orange-100 4.8:1) */
    --nv-orange-500: #b8935a;  /* ทอง: จุดเน้น/ไฮไลต์ */
    --nv-orange-300: #e2c68e;  /* ปุ่มสั่งการ (ตัวหนังสือเข้ม 9:1) */
    --nv-orange-100: #f6e6c6;
    --nv-gold-ink: #6e5320;    /* ตัวหนังสือบนพื้นทองอ่อน (5.8:1) */
    --nv-red-600: #a63d37;
    --nv-red-100: #f4dad6;
    --nv-muted-dark: #4e5f55;  /* ป้าย/ปุ่มสีเทาเข้ม (บนพื้นอ่อน 5.7–6:1) */
    --nv-red-ink: #8f2c27;     /* ตัวหนังสือบนพื้นแดงอ่อน (6.2:1) */
    --nv-ink: #26342c;
    --nv-muted: #586b60;       /* ตัวรอง (บนพื้นหน้า 4.9:1 บนการ์ด 5.4:1) */
    --nv-line: #e2dccb;
    --nv-bg: #f3eee2;          /* กระดาษ */
    --nv-card: #fbf8f0;        /* การ์ดขาวอุ่น */
    --nv-radius: 14px;
    --nv-radius-lg: 20px;
    --nv-shadow: 0 1px 0 rgba(31, 58, 46, .04), 0 10px 30px -12px rgba(31, 58, 46, .18);
    /* สีกราฟ/gauge ของหน้า portal (U5 ขั้น 1) ค่าเริ่มต้น = สีเดิมที่ฝังใน view ทุกตัว (ภาพไม่เปลี่ยน) view จะอ่านผ่าน navaColor() ในขั้น 2–3 */
    --nv-chart-bad: #DF5353;      /* แดง: ต่ำ/แห้ง */
    --nv-chart-warn: #F58B27;     /* ส้ม */
    --nv-chart-ok: #55BF3B;       /* เขียว: พอดี */
    --nv-chart-cool: #27D6F5;     /* ฟ้า: สูง/ชื้น */
    --nv-chart-caution: #DDDF0D;  /* เหลือง */
    --nv-chart-ink: #333333;      /* ตัวเลขกลาง gauge */
    --nv-chart-tick: #FFFFFF;     /* เส้นคั่นแถบ gauge */
    --nv-chart-axis: #808080;     /* เส้นอ้างอิงแกนของกราฟเส้น (melon) */
    --nv-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", "Sarabun", Roboto, Helvetica, Arial, sans-serif;

    /* ทับตัวแปรของ Bootstrap 5 ให้หน้าเดิมที่ใช้คลาส Bootstrap เปลี่ยนโทนทันที */
    --bs-body-font-family: var(--nv-font);
    --bs-body-color: var(--nv-ink);
    --bs-body-color-rgb: 38, 52, 44;
    --bs-body-bg: var(--nv-bg);
    --bs-secondary: var(--nv-muted);
    --bs-secondary-rgb: 88, 107, 96;
    --bs-secondary-color: var(--nv-muted);
    --bs-border-color: var(--nv-line);
    --bs-border-radius: var(--nv-radius);
    --bs-border-radius-lg: var(--nv-radius-lg);
    --bs-primary: var(--nv-btn);
    --bs-primary-rgb: 43, 106, 71;
    --bs-success: var(--nv-green-700);
    --bs-success-rgb: 43, 106, 71;
    --bs-warning: var(--nv-orange-300);
    --bs-warning-rgb: 226, 198, 142;
    --bs-danger: var(--nv-red-600);
    --bs-danger-rgb: 166, 61, 55;
    --bs-link-color: var(--nv-green-700);
    --bs-link-color-rgb: 43, 106, 71;
    --bs-link-hover-color: var(--nv-green-800);
    --bs-link-hover-color-rgb: 31, 58, 46;
    --bs-focus-ring-color: rgba(184, 147, 90, .35);
    --bs-code-color: var(--nv-green-800);
    --bs-card-bg: var(--nv-card);
    --bs-card-cap-bg: transparent;
    --bs-card-border-color: var(--nv-line);
}

body {
    font-family: var(--nv-font);
    color: var(--nv-ink);
    background: var(--nv-bg);
}

/* ปุ่ม */
.btn { border-radius: var(--nv-radius); }
.btn-primary {
    --bs-btn-bg: var(--nv-btn);
    --bs-btn-border-color: var(--nv-btn);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--nv-btn-hover);
    --bs-btn-hover-border-color: var(--nv-btn-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--nv-green-800);
    --bs-btn-active-border-color: var(--nv-green-800);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--nv-btn);
    --bs-btn-disabled-border-color: var(--nv-btn);
    --bs-btn-focus-shadow-rgb: 184, 147, 90;
}
.btn-outline-primary {
    --bs-btn-color: var(--nv-btn);
    --bs-btn-border-color: var(--nv-btn);
    --bs-btn-hover-bg: var(--nv-btn);
    --bs-btn-hover-border-color: var(--nv-btn);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--nv-btn-hover);
    --bs-btn-active-border-color: var(--nv-btn-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--nv-btn);
    --bs-btn-disabled-border-color: var(--nv-btn);
}
.btn-warning {
    --bs-btn-bg: var(--nv-orange-300);
    --bs-btn-border-color: var(--nv-orange-300);
    --bs-btn-color: #3a2208;
    --bs-btn-hover-bg: var(--nv-orange-500);
    --bs-btn-hover-border-color: var(--nv-orange-500);
    --bs-btn-hover-color: #2b1805;
    --bs-btn-active-bg: var(--nv-orange-500);
    --bs-btn-active-border-color: var(--nv-orange-500);
    --bs-btn-active-color: #2b1805;
    --bs-btn-disabled-bg: var(--nv-orange-300);
    --bs-btn-disabled-border-color: var(--nv-orange-300);
    --bs-btn-disabled-color: #3a2208;
}
.btn-danger {
    --bs-btn-bg: var(--nv-red-600);
    --bs-btn-border-color: var(--nv-red-600);
    --bs-btn-hover-bg: var(--nv-red-ink);
    --bs-btn-hover-border-color: var(--nv-red-ink);
    --bs-btn-active-bg: var(--nv-red-ink);
    --bs-btn-active-border-color: var(--nv-red-ink);
    --bs-btn-disabled-bg: var(--nv-red-600);
    --bs-btn-disabled-border-color: var(--nv-red-600);
}

/* ปุ่มสีอื่นของ Bootstrap: ค่าเริ่มต้นของ Bootstrap คอนทราสต์ต่ำ (ตรวจจากหน้าจริง 11 หน้า 26 ต.ค. 2569: outline-secondary 4.0–4.4, outline-danger 4.3, outline-success 4.3, outline-warning 1.4) */
.btn-secondary {
    --bs-btn-bg: var(--nv-muted); --bs-btn-border-color: var(--nv-muted); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--nv-muted-dark); --bs-btn-hover-border-color: var(--nv-muted-dark); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--nv-muted-dark); --bs-btn-active-border-color: var(--nv-muted-dark); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--nv-muted); --bs-btn-disabled-border-color: var(--nv-muted); --bs-btn-focus-shadow-rgb: 184, 147, 90;
}
.btn-outline-secondary {
    --bs-btn-color: var(--nv-muted); --bs-btn-border-color: var(--nv-muted);
    --bs-btn-hover-bg: var(--nv-muted); --bs-btn-hover-border-color: var(--nv-muted); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--nv-muted-dark); --bs-btn-active-border-color: var(--nv-muted-dark); --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--nv-muted); --bs-btn-disabled-border-color: var(--nv-muted); --bs-btn-focus-shadow-rgb: 184, 147, 90;
}
.btn-success {
    --bs-btn-bg: var(--nv-green-700); --bs-btn-border-color: var(--nv-green-700); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--nv-btn-hover); --bs-btn-hover-border-color: var(--nv-btn-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--nv-green-800); --bs-btn-active-border-color: var(--nv-green-800); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--nv-green-700); --bs-btn-disabled-border-color: var(--nv-green-700); --bs-btn-focus-shadow-rgb: 184, 147, 90;
}
.btn-outline-success {
    --bs-btn-color: var(--nv-green-700); --bs-btn-border-color: var(--nv-green-700);
    --bs-btn-hover-bg: var(--nv-green-700); --bs-btn-hover-border-color: var(--nv-green-700); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--nv-btn-hover); --bs-btn-active-border-color: var(--nv-btn-hover); --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--nv-green-700); --bs-btn-disabled-border-color: var(--nv-green-700); --bs-btn-focus-shadow-rgb: 184, 147, 90;
}
.btn-outline-danger {
    --bs-btn-color: var(--nv-red-600); --bs-btn-border-color: var(--nv-red-600);
    --bs-btn-hover-bg: var(--nv-red-600); --bs-btn-hover-border-color: var(--nv-red-600); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--nv-red-ink); --bs-btn-active-border-color: var(--nv-red-ink); --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--nv-red-600); --bs-btn-disabled-border-color: var(--nv-red-600); --bs-btn-focus-shadow-rgb: 184, 147, 90;
}
.btn-outline-warning {
    --bs-btn-color: var(--nv-orange-600); --bs-btn-border-color: var(--nv-orange-500);
    --bs-btn-hover-bg: var(--nv-orange-300); --bs-btn-hover-border-color: var(--nv-orange-500); --bs-btn-hover-color: #3a2208;
    --bs-btn-active-bg: var(--nv-orange-500); --bs-btn-active-border-color: var(--nv-orange-500); --bs-btn-active-color: #2b1805;
    --bs-btn-disabled-color: var(--nv-orange-600); --bs-btn-disabled-border-color: var(--nv-orange-500); --bs-btn-focus-shadow-rgb: 184, 147, 90;
}

/* โค้ดในข้อความ: เขียวป่าบนมิสต์อ่อน (เดิมชมพูของ Bootstrap 3.9–4.3:1) */
code { background: var(--nv-green-100); padding: .08em .4em; border-radius: 6px; font-size: .875em; }
pre code { background: transparent; padding: 0; }

/* ฟอร์ม */
/* ช่องกรอกทุกชนิด/ทุกขนาด (text, password, number, date, time, search, select, file, textarea; ปกติ/-sm/-lg/ใน input-group) หน้าตาเดียวกัน
   แบบอ้างอิง = ช่อง "พิมพ์ชื่อบอร์ดให้ตรงเพื่อยืนยัน" ในหน้า OTA (ผู้ใช้เลือก 26 ต.ค. 2569): พื้นกระดาษ เส้นขอบ --nv-line รัศมี 14px สูง 38px
   ขอบใน .75rem ตัวอักษร 16px (16px ยังกัน iOS ซูมหน้าตอนแตะช่อง) */
.form-control, .form-select,
.form-control-sm, .form-select-sm, .form-control-lg, .form-select-lg,
.input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-lg > .form-control, .input-group-lg > .form-select {
    background-color: var(--nv-bg); border-color: var(--nv-line); border-radius: var(--nv-radius);
    min-height: calc(1.5em + .75rem + 2px); padding-top: .375rem; padding-bottom: .375rem; padding-left: .75rem; padding-right: .75rem; font-size: 1rem; color: var(--nv-ink);
}
.form-select, .form-select-sm, .form-select-lg, .input-group-sm > .form-select, .input-group-lg > .form-select { padding-right: 2.25rem; }
.form-control::placeholder { color: var(--nv-muted); opacity: .85; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--nv-green-100); opacity: 1; color: var(--nv-muted); }
.form-control::file-selector-button { background-color: var(--nv-green-100); color: var(--nv-green-800); border-color: var(--nv-line); }
textarea.form-control, textarea.form-control-sm { min-height: calc(3em + .75rem + 2px); }
.form-control:focus, .form-select:focus {
    background-color: var(--nv-card);
    border-color: var(--nv-green-600);
    box-shadow: 0 0 0 .2rem rgba(184, 147, 90, .28);
}
.form-check-input:checked { background-color: var(--nv-btn); border-color: var(--nv-btn); }
.form-check-input:focus { border-color: var(--nv-green-600); box-shadow: 0 0 0 .2rem rgba(184, 147, 90, .28); }

/* ตาราง */
.table {
    --bs-table-bg: var(--nv-card);
    --bs-table-striped-bg: var(--nv-green-50);
    --bs-table-hover-bg: var(--nv-green-100);
    --bs-table-border-color: var(--nv-line);
}
.table > thead > tr > th { color: var(--nv-muted); font-weight: 600; }
.table td, .table th { font-variant-numeric: tabular-nums; }
.table-modern {
    background: var(--nv-card);
    border-radius: var(--nv-radius-lg);
    box-shadow: var(--nv-shadow);
    overflow: hidden;
}
.table-modern.table-responsive { overflow-x: auto; }
.table-modern .table { --bs-table-bg: transparent; }

/* alert */
.alert { border-radius: var(--nv-radius); border-width: 1px; }
.alert-success { --bs-alert-bg: var(--nv-green-100); --bs-alert-border-color: var(--nv-green-200); --bs-alert-color: var(--nv-green-800); }
.alert-warning { --bs-alert-bg: var(--nv-orange-100); --bs-alert-border-color: var(--nv-orange-300); --bs-alert-color: var(--nv-orange-600); }
.alert-danger { --bs-alert-bg: var(--nv-red-100); --bs-alert-border-color: #e8bcb7; --bs-alert-color: var(--nv-red-ink); }
.alert-secondary { --bs-alert-bg: var(--nv-green-50); --bs-alert-border-color: var(--nv-line); --bs-alert-color: var(--nv-muted-dark); }
.alert-info { --bs-alert-bg: var(--nv-green-50); --bs-alert-border-color: var(--nv-green-200); --bs-alert-color: var(--nv-green-800); }

/* badge */
.badge { border-radius: 999px; }
.badge.bg-success { background-color: var(--nv-green-100) !important; color: var(--nv-green-800) !important; }
.badge.bg-warning { background-color: var(--nv-orange-100) !important; color: var(--nv-orange-600) !important; }
.badge.bg-danger { background-color: var(--nv-red-100) !important; color: var(--nv-red-ink) !important; }
.badge.bg-secondary { background-color: #e9e5d6 !important; color: var(--nv-muted-dark) !important; }

/* pagination */
.pagination {
    --bs-pagination-color: var(--nv-green-700);
    --bs-pagination-hover-color: var(--nv-green-800);
    --bs-pagination-hover-bg: var(--nv-green-100);
    --bs-pagination-focus-color: var(--nv-green-800);
    --bs-pagination-focus-bg: var(--nv-green-100);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(184, 147, 90, .28);
    --bs-pagination-active-bg: var(--nv-btn);
    --bs-pagination-active-border-color: var(--nv-btn);
    --bs-pagination-active-color: #fff;
    --bs-pagination-border-color: var(--nv-line);
    --bs-pagination-border-radius: var(--nv-radius);
}

/* nav tabs/pills (หน้า fail2ban 3 tab) */
.nav-tabs { --bs-nav-tabs-link-active-color: var(--nv-green-800); --bs-nav-tabs-border-color: var(--nv-line); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--nv-btn); --bs-nav-pills-link-active-color: #fff; }

/* การ์ดและส่วนประกอบร่วม (ใช้ใน U2 เป็นต้นไป) */
.card { background: var(--nv-card); border-color: var(--nv-line); border-radius: var(--nv-radius-lg); box-shadow: var(--nv-shadow); }
.card-header { background: linear-gradient(180deg, #fffdf7, var(--nv-card)); border-bottom-color: var(--nv-line); }
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 600;
}
.pill.ok { background: var(--nv-green-100); color: var(--nv-green-700); }
.pill.warn { background: var(--nv-orange-100); color: var(--nv-orange-600); }
.pill.bad { background: var(--nv-red-100); color: var(--nv-red-ink); }
.pill.mute { background: #e9e5d6; color: var(--nv-muted-dark); }
.stat .label { color: var(--nv-muted); font-size: .8rem; }
.stat .val { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.stat .unit { font-size: .9rem; color: var(--nv-muted); font-weight: 500; }