/* =========================================================
   SPIN TRUCK SERVICE MANAGEMENT SYSTEM
   GLOBAL TYPOGRAPHY & RESPONSIVE STANDARD
   Staff + Customer
   Font: Noto Sans Thai
   ========================================================= */

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


/* =========================================================
   1. GLOBAL FONT
   ========================================================= */

html,
body,
body *,
button,
input,
select,
textarea,
option,
table,
thead,
tbody,
tfoot,
tr,
th,
td,
label,
a,
span,
div,
p,
small,
strong,
b,
nav,
header,
footer,
section,
article,
aside,
main,
form,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif !important;
}

html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}


/* =========================================================
   2. NORMAL TEXT
   ========================================================= */

p,
li {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
}

label {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

strong,
b {
    font-weight: 700 !important;
}


/* =========================================================
   3. HEADINGS
   ========================================================= */

h1 {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

h2 {
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

h4 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

h5 {
    font-size: 18px !important;
    font-weight: 700 !important;
}

h6 {
    font-size: 16px !important;
    font-weight: 700 !important;
}


/* =========================================================
   4. FORM
   ========================================================= */

input,
select,
textarea,
option {
    font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

input,
select {
    min-height: 44px;
}

textarea {
    line-height: 1.6 !important;
}

input::placeholder,
textarea::placeholder {
    font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: .7;
}


/* =========================================================
   5. BUTTON
   ========================================================= */

button,
.btn,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}


/* =========================================================
   6. TABLE
   ========================================================= */

table {
    font-size: 15px !important;
}

table th {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}

table td {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}


/* =========================================================
   7. SMALL / SECONDARY TEXT
   ========================================================= */

small,
.small,
.text-small,
.text-muted,
.muted,
.description,
.subtitle,
.sub-title,
.helper,
.help-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   8. CARDS
   ========================================================= */

.card-title,
.panel-title,
.box-title,
.widget-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.card-subtitle {
    font-size: 15px !important;
    font-weight: 400 !important;
}


/* =========================================================
   9. BADGE / STATUS
   ========================================================= */

.badge,
.status,
.status-badge,
.pill,
.tag,
.chip {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}


/* =========================================================
   10. DASHBOARD STATISTICS
   ========================================================= */

.stat-number,
.stat-value,
.metric-value,
.summary-number,
.kpi-value {
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

.stat-label,
.metric-label,
.summary-label,
.kpi-label {
    font-size: 15px !important;
    font-weight: 600 !important;
}


/* =========================================================
   11. NAVIGATION
   ========================================================= */

nav a,
.nav a,
.navbar a,
.menu a,
.sidebar a {
    font-size: 15px !important;
    font-weight: 600 !important;
}


/* =========================================================
   12. POPUP / MODAL
   ========================================================= */

.modal-title,
.popup-title,
.dialog-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.modal-body,
.popup-body,
.dialog-body {
    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   13. JOB NUMBER
   ========================================================= */

.job-no,
.job-number {
    font-size: 18px !important;
    font-weight: 700 !important;
}


/* =========================================================
   14. JOB DETAIL
   แก้ปัญหาหน้ารายละเอียดงานตัวหนังสือเล็ก
   ========================================================= */

.job-detail,
.job-detail *,
.job-container,
.job-container *,
.job-card,
.job-card *,
.detail-card,
.detail-card * {
    font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif !important;
}

.job-detail h1,
.job-container h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
}

.job-detail h2,
.job-container h2,
.job-card h2,
.detail-card h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
}

.job-detail h3,
.job-container h3,
.job-card h3,
.detail-card h3 {
    font-size: 19px !important;
    font-weight: 700 !important;
}

.job-detail p,
.job-container p,
.job-card p,
.detail-card p {
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.job-detail label,
.job-container label,
.job-card label,
.detail-card label {
    font-size: 15px !important;
    font-weight: 600 !important;
}

.job-detail input,
.job-detail select,
.job-detail textarea,
.job-container input,
.job-container select,
.job-container textarea {
    font-size: 16px !important;
}

.job-detail button,
.job-detail .btn,
.job-container button,
.job-container .btn {
    font-size: 16px !important;
    font-weight: 600 !important;
}


/* =========================================================
   15. CUSTOMER GLOBAL
   ========================================================= */

.customer-page,
.customer-page *,
.customer-container,
.customer-container *,
.customer-card,
.customer-card *,
.form-card,
.form-card *,
.track-card,
.track-card * {
    font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif !important;
}


/* =========================================================
   16. CUSTOMER HEADINGS
   ========================================================= */

.customer-page h1,
.customer-container h1,
.form-card h1,
.track-card h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.customer-page h2,
.customer-container h2,
.customer-card h2,
.form-card h2,
.track-card h2 {
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

.customer-page h3,
.customer-container h3,
.customer-card h3,
.form-card h3,
.track-card h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}


/* =========================================================
   17. CUSTOMER NORMAL TEXT
   ========================================================= */

.customer-page p,
.customer-container p,
.customer-card p,
.form-card p,
.track-card p {
    font-size: 17px !important;
    line-height: 1.75 !important;
}

.customer-page label,
.customer-container label,
.customer-card label,
.form-card label,
.track-card label {
    font-size: 16px !important;
    font-weight: 600 !important;
}


/* =========================================================
   18. CUSTOMER FORM
   ========================================================= */

.customer-page input,
.customer-page select,
.customer-page textarea,
.customer-container input,
.customer-container select,
.customer-container textarea,
.customer-card input,
.customer-card select,
.customer-card textarea,
.form-card input,
.form-card select,
.form-card textarea,
.track-card input,
.track-card select,
.track-card textarea {
    font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    min-height: 46px;
}

.customer-page input::placeholder,
.customer-page textarea::placeholder,
.customer-container input::placeholder,
.customer-container textarea::placeholder,
.form-card input::placeholder,
.form-card textarea::placeholder {
    font-size: 15px !important;
}


/* =========================================================
   19. CUSTOMER BUTTON
   ========================================================= */

.customer-page button,
.customer-page .btn,
.customer-page .button,
.customer-container button,
.customer-container .btn,
.customer-container .button,
.customer-card button,
.customer-card .btn,
.form-card button,
.form-card .btn,
.track-card button,
.track-card .btn {
    font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}


/* =========================================================
   20. CUSTOMER JOB NUMBER
   ========================================================= */

.customer-page .job-no,
.customer-page .job-number,
.customer-container .job-no,
.customer-container .job-number,
.track-card .job-no,
.track-card .job-number {
    font-size: 19px !important;
    font-weight: 700 !important;
}


/* =========================================================
   21. CUSTOMER STATUS
   ========================================================= */

.customer-page .badge,
.customer-page .status,
.customer-page .status-badge,
.customer-container .badge,
.customer-container .status,
.customer-container .status-badge,
.track-card .badge,
.track-card .status,
.track-card .status-badge {
    font-size: 14px !important;
    font-weight: 600 !important;
}


/* =========================================================
   22. CUSTOMER SECONDARY TEXT
   ========================================================= */

.customer-page small,
.customer-page .text-muted,
.customer-page .muted,
.customer-page .description,
.customer-container small,
.customer-container .text-muted,
.customer-container .muted,
.customer-container .description,
.form-card small,
.track-card small {
    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* =========================================================
   23. CUSTOMER POPUP
   ========================================================= */

.customer-page .modal-title,
.customer-page .popup-title,
.customer-container .modal-title,
.customer-container .popup-title,
.form-card .modal-title,
.form-card .popup-title {
    font-size: 22px !important;
    font-weight: 700 !important;
}

.customer-page .modal-body,
.customer-page .popup-body,
.customer-container .modal-body,
.customer-container .popup-body,
.form-card .modal-body,
.form-card .popup-body {
    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* =========================================================
   24. CUSTOMER TABLE
   ========================================================= */

.customer-page table,
.customer-container table,
.customer-card table,
.form-card table,
.track-card table {
    font-size: 15px !important;
}

.customer-page table th,
.customer-container table th,
.customer-card table th,
.form-card table th,
.track-card table th {
    font-size: 15px !important;
    font-weight: 700 !important;
}

.customer-page table td,
.customer-container table td,
.customer-card table td,
.form-card table td,
.track-card table td {
    font-size: 15px !important;
}


/* =========================================================
   25. WELCOME POPUP
   ========================================================= */

.welcome-modal,
.welcome-popup,
.welcome-content {
    font-family: "Noto Sans Thai", Tahoma, Arial, sans-serif !important;
}

.welcome-modal h1,
.welcome-popup h1,
.welcome-content h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
}

.welcome-modal h2,
.welcome-popup h2,
.welcome-content h2 {
    font-size: 23px !important;
    font-weight: 700 !important;
}

.welcome-modal p,
.welcome-popup p,
.welcome-content p {
    font-size: 16px !important;
}

.welcome-modal button,
.welcome-popup button,
.welcome-content button,
.welcome-modal .btn,
.welcome-popup .btn,
.welcome-content .btn {
    font-size: 16px !important;
    font-weight: 600 !important;
}


/* =========================================================
   26. TABLET
   ========================================================= */

@media screen and (max-width: 768px) {

    html,
    body {
        font-size: 16px !important;
    }

    h1 {
        font-size: 26px !important;
    }

    h2 {
        font-size: 23px !important;
    }

    h3 {
        font-size: 20px !important;
    }

    p,
    label,
    li {
        font-size: 16px !important;
    }

    input,
    select,
    textarea,
    button,
    .btn,
    .button {
        font-size: 16px !important;
    }

    table,
    table th,
    table td {
        font-size: 14px !important;
    }

    .customer-page h1,
    .customer-container h1,
    .form-card h1,
    .track-card h1 {
        font-size: 25px !important;
    }

    .customer-page h2,
    .customer-container h2,
    .customer-card h2,
    .form-card h2,
    .track-card h2 {
        font-size: 21px !important;
    }

    .customer-page p,
    .customer-container p,
    .customer-card p,
    .form-card p,
    .track-card p {
        font-size: 16px !important;
    }

    .stat-number,
    .stat-value,
    .metric-value,
    .summary-number,
    .kpi-value {
        font-size: 28px !important;
    }
}


/* =========================================================
   27. MOBILE
   ========================================================= */

@media screen and (max-width: 480px) {

    html,
    body {
        font-size: 15px !important;
    }

    h1 {
        font-size: 24px !important;
    }

    h2 {
        font-size: 22px !important;
    }

    h3 {
        font-size: 19px !important;
    }

    p,
    label,
    li {
        font-size: 15px !important;
    }

    input,
    select,
    textarea,
    button,
    .btn,
    .button {
        font-size: 15px !important;
    }

    table,
    table th,
    table td {
        font-size: 14px !important;
    }

    .customer-page h1,
    .customer-container h1,
    .form-card h1,
    .track-card h1 {
        font-size: 24px !important;
    }

    .customer-page h2,
    .customer-container h2,
    .customer-card h2,
    .form-card h2,
    .track-card h2 {
        font-size: 21px !important;
    }

    .customer-page h3,
    .customer-container h3,
    .customer-card h3,
    .form-card h3,
    .track-card h3 {
        font-size: 19px !important;
    }

    .customer-page p,
    .customer-container p,
    .customer-card p,
    .form-card p,
    .track-card p {
        font-size: 15px !important;
    }

    .customer-page label,
    .customer-container label,
    .form-card label,
    .track-card label {
        font-size: 15px !important;
    }

    .customer-page input,
    .customer-page select,
    .customer-page textarea,
    .customer-container input,
    .customer-container select,
    .customer-container textarea,
    .form-card input,
    .form-card select,
    .form-card textarea {
        font-size: 15px !important;
    }

    .customer-page button,
    .customer-page .btn,
    .customer-container button,
    .customer-container .btn,
    .form-card button,
    .form-card .btn,
    .track-card button,
    .track-card .btn {
        font-size: 15px !important;
    }

    small,
    .small,
    .text-muted,
    .muted,
    .description {
        font-size: 13px !important;
    }
}


/* =========================================================
   END
   SPIN TRUCK GLOBAL TYPOGRAPHY
   ========================================================= */