@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap");

/* ==========================================================================
   INSTALLATION WIZARD – CORPORATE THEME
   ปรับโทนสีทั้งหมดได้ที่ตัวแปรใน :root
   ========================================================================== */
:root {
    --c-brand-950: #07152b;
    --c-brand-900: #0a1b33;
    --c-brand-800: #0f2747;
    --c-brand-700: #153a69;
    --c-brand-600: #1d4f91;
    --c-brand-500: #2d68b3;
    --c-brand-400: #5b8ccc;
    --c-brand-50:  #f1f6fc;
    --c-bg:        #f3f5f9;
    --c-surface:   #ffffff;
    --c-border:    #dde3ec;
    --c-border-strong: #c6cfdd;
    --c-text:      #1f2a3c;
    --c-text-muted:#5b6778;
    --c-danger:    #b42318;
    --c-danger-bg: #fcebea;
    --radius:      6px;
    --radius-lg:   12px;
    --shadow-sm:   0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-lg:   0 20px 50px rgba(7, 21, 43, .18);
    --focus-ring:  0 0 0 3px rgba(45, 104, 179, .28);
    --font-sans:   "IBM Plex Sans Thai", "Sarabun", "Noto Sans Thai", "Segoe UI", Tahoma, "Helvetica Neue", Arial, sans-serif;
}

body {
    background: linear-gradient(180deg, var(--c-brand-900) 0, var(--c-brand-800) 220px, var(--c-bg) 220px) fixed !important;
    background-color: var(--c-bg) !important;
    color: var(--c-text);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    color: var(--c-brand-900);
    font-weight: 600;
}

a { color: var(--c-brand-600); }
a:hover { color: var(--c-brand-700); }

hr {
    margin-top: 25px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid var(--c-border);
}

.margin-t-10 { margin-top: 10px; }
.margin-t-30 { margin-top: 30px; }

/* ---------- LAYOUT ---------- */
.wrapper {
    overflow: hidden;
    min-height: 100%;
    height: auto;
    width: 960px;
    max-width: calc(100% - 32px);
    margin: 40px auto;
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.logo-wrapper {
    background: linear-gradient(135deg, var(--c-brand-800) 0%, var(--c-brand-700) 100%);
    border-bottom: 3px solid var(--c-brand-400);
    padding: 28px 25px;
}

.logo {
    background: url(images/logo.png) no-repeat 50% 50%;
    height: 50px;
}

.language-selector { margin: 12px 0; }

.content {
    background-color: var(--c-surface);
    padding: 28px 32px;
}

.form-horizontal { padding: 0 60px; }

.content-footer {
    padding: 20px;
    background: var(--c-brand-50);
    border-top: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: 13px;
}

/* ---------- FORM ---------- */
label { font-weight: 600; color: var(--c-text); }

.form-control,
.custom-select,
select {
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    color: var(--c-text);
    background-color: var(--c-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.custom-select:focus,
select:focus {
    border-color: var(--c-brand-500);
    box-shadow: var(--focus-ring);
    outline: 0;
}

input[type=checkbox], input[type=radio] { accent-color: var(--c-brand-600); }

.credentials {
    background: var(--c-brand-50);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 22px 10px 7px;
    margin-bottom: 15px;
    margin-top: 20px;
}

/* ---------- BUTTONS ---------- */
.btn {
    border-radius: var(--radius);
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn:focus { box-shadow: var(--focus-ring); }

.btn-install {
    padding: 10px 36px;
    font-size: 18px;
    font-weight: 600;
    background-color: var(--c-brand-600);
    border: 1px solid var(--c-brand-600);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
}

.btn-install:hover {
    background-color: var(--c-brand-700);
    border-color: var(--c-brand-700);
    color: #ffffff;
}

.btn-default {
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    padding: 8px 25px;
    background: var(--c-surface);
    color: var(--c-text);
    font-size: 15px;
}

.btn-default:hover {
    background-color: var(--c-brand-50);
    border-color: var(--c-brand-400);
    color: var(--c-brand-700);
}

/* ---------- VALIDATION ---------- */
.validation-summary-errors {
    color: var(--c-danger);
    background: var(--c-danger-bg);
    border: 1px solid #f1b5b0;
    border-radius: var(--radius);
    padding: 10px 14px;
}

.validation-summary-errors ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.field-validation-error { color: var(--c-danger); }

/* ---------- LOADING OVERLAY ---------- */
.throbber-header { font-size: 145%; }

.throbber { display: none; }

    .throbber .curtain {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: var(--c-brand-950);
        opacity: 0.9;
        filter: alpha(opacity=90);
    }

    .throbber .curtain-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

        .throbber .curtain-content div {
            text-align: center;
            padding: 250px;
            color: #FFF;
        }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 767px) {
    .wrapper { margin: 16px auto; }
    .content { padding: 20px 16px; }
    .form-horizontal { padding: 0 8px; }
    .throbber .curtain-content div { padding: 120px 20px; }
}