/**
 * ==========================================================
 * Engineering Report System
 * File: common.css
 * Version: 2.0.0
 * ----------------------------------------------------------
 * หน้าที่
 * - กำหนดสีและตัวแปรกลางของระบบ
 * - กำหนดฟอนต์และรูปแบบพื้นฐาน
 * - เก็บรูปแบบปุ่มที่ใช้ร่วมกันทุกหน้า
 * ==========================================================
 */

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-soft: #eff6ff;

    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;

    --background: #f3f6fb;
    --surface: #ffffff;
    --border: #dfe7f2;

    --text-primary: #172033;
    --text-secondary: #64748b;
    --text-light: #94a3b8;

    --radius-small: 10px;
    --radius-medium: 16px;
    --radius-large: 24px;

    --shadow-small: 0 2px 8px rgba(30, 64, 175, 0.06);
    --shadow-medium: 0 12px 30px rgba(30, 64, 175, 0.1);

    --content-width: 1180px;
}

/* ==========================================================
   RESET
   ปรับค่าเริ่มต้นของ Browser ให้เหมือนกัน
   ========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: "IBM Plex Sans Thai", "Sarabun", sans-serif;
    color: var(--text-primary);
    background: var(--background);
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ==========================================================
   ACCESSIBILITY
   แสดงกรอบเมื่อใช้แป้นพิมพ์เลือกปุ่มหรือช่องกรอก
   ========================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.25);
    outline-offset: 2px;
}

/* ==========================================================
   SHARED BUTTONS
   ปุ่มกลางที่ใช้ร่วมกันทุกหน้า
   ========================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    font-weight: 600;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    color: #ffffff;
    background: var(--primary);
    box-shadow: 0 7px 18px rgba(37, 99, 235, 0.22);
}

.button-primary:hover {
    background: var(--primary-dark);
}

.button-secondary {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: #dbeafe;
}

.button-danger {
    color: var(--danger);
    background: #fef2f2;
    border-color: #fecaca;
}

.button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

/* ==========================================================
   UTILITY CLASSES
   Class เล็ก ๆ ที่นำไปใช้ซ้ำได้
   ========================================================== */

.hidden {
    display: none !important;
}

.text-muted {
    color: var(--text-secondary);
}

.container {
    width: min(100% - 32px, var(--content-width));
    margin-inline: auto;
}