/* ========================================
   9TEEDIN.COM THEME — Minimal Soft UI
   ฟอนต์และรูปทรงตาม pototype_design (Outfit + Noto Sans Thai, มุมมน เงาฟุ้ง)
   สีใช้โทนเขียวเดิมของ 9teedin: #1a562a · #FFFFFF · #60982b · #F3D98F
   ไฟล์นี้เปลี่ยนเฉพาะฟอนต์ สี มุมมน และเงา ไม่แตะ layout (ขนาด ระยะ grid)
   โหลดต่อจาก css/9teedin-style.css
   ======================================== */

:root {
    /* 4 สีหลักของแบรนด์ */
    --brand-primary:   #1a562a;   /* เขียวเข้ม */
    --brand-white:     #ffffff;
    --brand-secondary: #60982b;   /* เขียวอ่อน */
    --brand-sand:      #f3d98f;

    /* green ramp (จาก #1a562a) */
    --color-accent-100: #eef6ef;
    --color-accent-200: #dcebdd;
    --color-accent-300: #bfd9c2;
    --color-accent-400: #60982b;   /* = brand secondary */
    --color-accent-500: #4c8a3a;
    --color-accent-600: #357345;
    --color-accent-700: #245f33;
    --color-accent-800: #1a562a;   /* = brand primary */
    --color-accent-900: #113b1c;

    /* sand ramp — สีเน้น */
    --sand-100: #fdf9ee;
    --sand-200: #fbf1d8;
    --sand-300: #f3d98f;
    --sand-400: #e5c368;
    --sand-500: #c9a444;
    --sand-700: #8a6d1c;

    /* พื้นหลัง / เส้นแบ่ง / ตัวอักษร — เทาอมเขียว */
    --color-surface: #f6faf6;
    --color-text: #1b2b1f;
    --color-divider: #e6eee7;
    --color-divider-strong: #cfdfd1;
    --color-neutral-400: #b3c6b6;
    --color-neutral-500: #829886;
    --color-neutral-600: #64796a;
    --color-neutral-700: #4a5f50;

    --ok-bg: #edf8f2;   --ok-bd: #b3e0c8;   --ok-fg: #1c6b45;   --ok-solid: #2e9666;
    --warn-bg: #fdf9ee; --warn-bd: #f3d98f; --warn-fg: #8a6d1c;
    --err-bg: #fdf1f0;  --err-bd: #f0c2be;  --err-fg: #a5423a;  --err-solid: #c8544a;
    --info-bg: #eef3f9; --info-bd: #bed3e8; --info-fg: #12446e;

    --font-thai: "Outfit", "Noto Sans Thai", system-ui, sans-serif;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(26,86,42,.04), 0 2px 8px rgba(26,86,42,.05);
    --shadow-md: 0 2px 6px rgba(26,86,42,.05), 0 8px 24px rgba(26,86,42,.07);
    --shadow-soft: 0 4px 20px rgba(96,152,43,.18);

    /* ตัวแปรของ template เดิม (assets/css/colors/color_5.css) */
    --theme-primary-color: #1a562a;
    --theme-secondary-color: #113b1c;
    --theme-footer-color: #1a562a;
    --theme-dark-color: #1a562a;
    --theme-primary-opacity-color: rgba(26, 86, 42, .8);
    --theme-secondary-opacity-color: rgba(17, 59, 28, .7);
    --theme-ordinary-font: "Outfit", "Noto Sans Thai", system-ui, sans-serif;
    --theme-highlight-font: "Outfit", "Noto Sans Thai", system-ui, sans-serif;
}

/* Typography — Outfit ไม่มีตัวไทย ตัวไทยจะตกไปใช้ Noto Sans Thai */
body {
    font-family: var(--font-thai);
    color: var(--color-text);
    letter-spacing: .002em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-thai);
    font-weight: 600;
    letter-spacing: -.015em;
    color: inherit;
}

button, input, select, textarea, .btn, .form-control, .form-select {
    font-family: var(--font-thai);
}

/* Color Overrides */
.bg-primary { background-color: var(--brand-primary) !important; }
.text-primary { color: var(--brand-primary) !important; }

.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-accent-700) !important;
    border-color: var(--color-accent-700) !important;
    box-shadow: var(--shadow-soft);
}

.bg-secondary { background-color: var(--brand-secondary) !important; }
.text-secondary { color: var(--color-accent-600) !important; }

.btn-secondary {
    background-color: #fff !important;
    border-color: var(--color-divider-strong) !important;
    color: var(--color-accent-800) !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--color-accent-100) !important;
    border-color: var(--brand-secondary) !important;
    color: var(--color-accent-800) !important;
}

.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary.active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}
.btn-outline-secondary {
    color: var(--color-accent-700);
    border-color: var(--color-divider-strong);
}
.btn-outline-secondary:hover {
    background-color: var(--color-accent-100);
    border-color: var(--brand-secondary);
    color: var(--color-accent-800);
}

.bg-success,
.btn-success {
    background-color: var(--ok-solid) !important;
    border-color: var(--ok-solid) !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: var(--ok-fg) !important;
    border-color: var(--ok-fg) !important;
}
.text-success { color: var(--ok-fg) !important; }

/* info = ฟ้าแบรนด์, warning = ทราย, danger = แดงนุ่ม */
.bg-info { background-color: var(--color-accent-600) !important; }
.bg-info.text-dark { background-color: var(--info-bg) !important; color: var(--info-fg) !important; }
.text-info { color: var(--color-accent-600) !important; }
.btn-info {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: #fff;
}
.btn-info:hover,
.btn-info:focus {
    background-color: var(--color-accent-500);
    border-color: var(--color-accent-500);
    color: #fff;
}

.bg-warning { background-color: var(--sand-300) !important; color: var(--brand-primary); }
.text-warning { color: var(--sand-500) !important; }
.btn-warning {
    background-color: var(--sand-300);
    border-color: var(--sand-300);
    color: var(--brand-primary);
}
.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--sand-400);
    border-color: var(--sand-400);
    color: var(--brand-primary);
}

.bg-danger { background-color: var(--err-solid) !important; }
.text-danger { color: var(--err-solid) !important; }
.btn-danger {
    background-color: var(--err-solid);
    border-color: var(--err-solid);
}
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--err-fg);
    border-color: var(--err-fg);
}
.btn-outline-danger {
    color: var(--err-solid);
    border-color: var(--err-bd);
}
.btn-outline-danger:hover {
    background-color: var(--err-bg);
    border-color: var(--err-solid);
    color: var(--err-fg);
}

.text-dark { color: var(--color-text) !important; }
.bg-light { background-color: var(--color-surface) !important; }
.border-primary { border-color: var(--brand-primary) !important; }

/* Links */
a {
    color: var(--color-accent-700);
    text-underline-offset: 3px;
}
a:hover { color: var(--color-accent-800); }

/* Navbar */
.main-nav { background-color: var(--brand-primary) !important; }

.navbar-light .navbar-nav .nav-link:hover,
.main-nav a.text-secondary:hover {
    color: var(--brand-sand) !important;
    border-radius: 999px;
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: var(--brand-primary);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }
    .navbar-light .navbar-nav .nav-link,
    .main-nav a.text-secondary {
        border-radius: var(--radius-sm);
    }
}

/* ปุ่มลงประกาศบน navbar — ใช้สีทรายเป็นจุดเน้น */
.main-nav .btn-danger {
    background-color: var(--brand-sand) !important;
    border-color: var(--brand-sand) !important;
    color: var(--brand-primary) !important;
    box-shadow: none;
}
.main-nav .btn-danger:hover {
    background-color: var(--sand-400) !important;
    border-color: var(--sand-400) !important;
    box-shadow: var(--shadow-soft);
}

/* Badges */
.badge { border-radius: 999px; }
.badge.bg-primary { background-color: var(--brand-primary) !important; }
.badge.bg-secondary { background-color: var(--brand-secondary) !important; }

/* Cards — Soft UI */
.card {
    border-color: var(--color-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card > .card-header:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card > .card-footer:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card > .list-group:last-child { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card-header.bg-primary { background-color: var(--brand-primary) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }

/* Buttons — แคปซูล */
.btn {
    border-radius: 999px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible {
    outline: 2.5px solid var(--brand-secondary);
    outline-offset: 2px;
}

/* Form Elements — ขอบ 1px + padding เพิ่ม 1px ให้ความสูงเท่าเดิม (เดิมขอบ 2px) */
.form-label { color: var(--color-neutral-700); }

.form-control,
.form-select,
select.form-control,
select.form-select {
    border: 1px solid var(--color-divider-strong);
    padding: calc(0.625rem + 1px) calc(0.875rem + 1px);
    border-radius: var(--radius-sm);
}
.form-control-sm,
select.form-control-sm {
    padding: calc(0.5rem + 1px) calc(0.75rem + 1px);
    border-radius: var(--radius-sm);
}
.form-control:hover,
.form-select:hover { border-color: var(--color-neutral-400); }
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-secondary);
    box-shadow: 0 0 0 4px rgba(96, 152, 43, .2);
}
.form-control::placeholder { color: var(--color-neutral-500); }
.form-control:disabled,
.form-select:disabled { background-color: #f9fbf9; color: var(--color-neutral-600); }

/* ช่องบังคับกรอก: เดิมขอบซ้าย 4px สีน้ำตาล คงความหนาเดิมไว้ เปลี่ยนเป็นสีทราย */
.form-control:required,
.form-select:required { border-left: 4px solid var(--sand-400); padding-left: 0.875rem; }
.form-control-sm:required,
select.form-control-sm:required { padding-left: 0.75rem; }

.select-arrow::after { color: var(--brand-primary); }

input[type="file"].form-control::file-selector-button {
    background-color: var(--brand-primary);
    border-radius: 999px;
}
input[type="file"].form-control::file-selector-button:hover { background-color: var(--color-accent-700); }

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(96, 152, 43, .2); border-color: var(--brand-secondary); }

/* Alerts — พาสเทลนุ่ม */
.alert { border-radius: var(--radius-md); }
.alert-success { background-color: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-fg); }
.alert-warning { background-color: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg); }
.alert-danger  { background-color: var(--err-bg);  border-color: var(--err-bd);  color: var(--err-fg); }
.alert-info { background-color: var(--info-bg); border-color: var(--info-bd); color: var(--info-fg); }
.alert-primary { background-color: var(--color-accent-100); border-color: var(--color-accent-300); color: var(--color-accent-700); }

/* Property Listings */
.property-item .price { color: var(--brand-primary); }

/* Pagination */
.page-link { color: var(--color-accent-700); border-color: var(--color-divider); }
.page-link:hover { background-color: var(--color-accent-100); color: var(--brand-primary); }
.page-item.active .page-link,
a.page-link.bg-primary,
.page-link.active {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.page-item:first-child .page-link { border-radius: 999px 0 0 999px; }
.page-item:last-child .page-link { border-radius: 0 999px 999px 0; }

/* Tables */
table th { background-color: var(--color-surface); color: var(--color-neutral-700); }
.table > :not(caption) > * > * { border-bottom-color: var(--color-divider); }

/* Labels */
.label { border-radius: 999px; background-color: var(--color-neutral-500); }
.label-success { border-radius: 999px; background-color: var(--ok-solid); }
.label-danger { border-radius: 999px; background-color: var(--err-solid); }

form .error { color: var(--err-fg); }

/* Footer / ปุ่มเลื่อนขึ้นบน */
.copyright { color: var(--color-neutral-600); }
#scroll.bg-secondary { background-color: var(--brand-primary) !important; border-radius: 999px; }

/* Dropdown / modal / list group */
.dropdown-menu {
    border-color: var(--color-divider);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.dropdown-item:hover,
.dropdown-item:focus { background-color: var(--color-accent-100); color: var(--brand-primary); }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--brand-primary); }
.modal-content { border-radius: var(--radius-lg); border-color: var(--color-divider); box-shadow: var(--shadow-md); }
.list-group-item.active { background-color: var(--brand-primary); border-color: var(--brand-primary); }

/* Scrollbar บาง กลมกลืน */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--color-divider-strong); border-radius: 999px; border: 3px solid #fff; }
*::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-400); }
*::-webkit-scrollbar-track { background: transparent; }

::selection { background: var(--sand-300); color: var(--brand-primary); }