/* ==========================================================================
   Sales Administration System
   Enterprise Typography
   File        : typography.css
   Description : Global Typography System
   Dependency  : theme.css
   ========================================================================== */

/* ==========================================================================
   BASE
   ========================================================================== */

body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-normal);
    color: var(--text-primary);
    line-height: var(--line-height);
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   HEADING
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: .75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    line-height: 1.25;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.50rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

/* ==========================================================================
   DISPLAY
   ========================================================================== */

.display-1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.15;
}

.display-2 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.15;
}

.display-3 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.display-4 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

/* ==========================================================================
   PAGE
   ========================================================================== */

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

.page-subtitle {
    margin-top: .35rem;
    color: var(--text-secondary);
    font-size: .95rem;
}

.page-description {
    color: var(--text-secondary);
    font-size: .90rem;
    line-height: 1.7;
}

/* ==========================================================================
   SECTION
   ========================================================================== */

.section-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: .875rem;
}

/* ==========================================================================
   CARD
   ========================================================================== */

.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .25rem;
}

.card-subtitle {
    color: var(--text-secondary);
    font-size: .875rem;
}

.card-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.card-label {
    font-size: .875rem;
    color: var(--text-secondary);
}

/* ==========================================================================
   TABLE
   ========================================================================== */

.table {
    color: var(--text-primary);
}

    .table thead th {
        font-size: .875rem;
        font-weight: 600;
        color: var(--table-header-color);
        white-space: nowrap;
    }

    .table tbody td {
        font-size: .90rem;
        vertical-align: middle;
    }

    .table .table-title {
        font-weight: 600;
    }

    .table .table-subtitle {
        color: var(--text-secondary);
        font-size: .80rem;
    }

/* ==========================================================================
   FORM
   ========================================================================== */

label,
.form-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: .35rem;
}

.form-control,
.form-select {
    font-size: .90rem;
}

.form-text {
    font-size: .80rem;
    color: var(--text-secondary);
}

.invalid-feedback {
    font-size: .80rem;
}

.valid-feedback {
    font-size: .80rem;
}

/* ==========================================================================
   BADGE
   ========================================================================== */

.badge {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.breadcrumb {
    font-size: .875rem;
}

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

    .breadcrumb-item.active {
        color: var(--text-primary);
        font-weight: 500;
    }

/* ==========================================================================
   NAV
   ========================================================================== */

.nav-link {
    font-size: .90rem;
    font-weight: 500;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar-nav-link {
    font-size: .90rem;
}

.sidebar-section-title {
    font-size: .70rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ==========================================================================
   LINK
   ========================================================================== */

a {
    color: var(--text-link);
}

    a:hover {
        color: var(--color-primary-hover);
    }

/* ==========================================================================
   TEXT COLOR
   ========================================================================== */

.text-primary-color {
    color: var(--color-primary) !important;
}

.text-success-color {
    color: var(--color-success) !important;
}

.text-warning-color {
    color: var(--color-warning) !important;
}

.text-danger-color {
    color: var(--color-danger) !important;
}

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

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

/* ==========================================================================
   FONT SIZE
   ========================================================================== */

.fs-xs {
    font-size: var(--font-size-xs) !important;
}

.fs-sm {
    font-size: var(--font-size-sm) !important;
}

.fs-md {
    font-size: var(--font-size-md) !important;
}

.fs-lg {
    font-size: var(--font-size-lg) !important;
}

.fs-xl {
    font-size: var(--font-size-xl) !important;
}

.fs-2xl {
    font-size: var(--font-size-2xl) !important;
}

/* ==========================================================================
   FONT WEIGHT
   ========================================================================== */

.fw-normal {
    font-weight: var(--font-weight-normal) !important;
}

.fw-medium {
    font-weight: var(--font-weight-medium) !important;
}

.fw-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.fw-bold {
    font-weight: var(--font-weight-bold) !important;
}

/* ==========================================================================
   TEXT ALIGN
   ========================================================================== */

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

/* ==========================================================================
   LETTER SPACING
   ========================================================================== */

.ls-sm {
    letter-spacing: .02em;
}

.ls-md {
    letter-spacing: .04em;
}

.ls-lg {
    letter-spacing: .08em;
}

/* ==========================================================================
   LINE HEIGHT
   ========================================================================== */

.lh-sm {
    line-height: 1.2;
}

.lh-md {
    line-height: 1.5;
}

.lh-lg {
    line-height: 1.8;
}

/* ==========================================================================
   TEXT TRANSFORM
   ========================================================================== */

.text-uppercase-sm {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .75rem;
    font-weight: 700;
}

/* ==========================================================================
   TEXT TRUNCATE
   ========================================================================== */

.text-truncate-1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-truncate-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text-truncate-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ==========================================================================
   CODE
   ========================================================================== */

code,
pre {
    font-family: Consolas, "Courier New", monospace;
}

code {
    color: #C7254E;
    background: #F8F9FA;
    padding: .15rem .35rem;
    border-radius: var(--radius-xs);
}

/* ==========================================================================
   SMALL
   ========================================================================== */

small,
.small {
    font-size: .80rem;
}

/* ==========================================================================
   HR
   ========================================================================== */

hr {
    border-color: var(--border-color);
    opacity: 1;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {

    .page-title {
        font-size: 1.5rem;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.50rem;
    }

    .display-1 {
        font-size: 2.8rem;
    }

    .display-2 {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {

    .page-title {
        font-size: 1.35rem;
    }

    h1 {
        font-size: 1.60rem;
    }

    h2 {
        font-size: 1.35rem;
    }

    h3 {
        font-size: 1.20rem;
    }

    .card-value {
        font-size: 1.4rem;
    }

    .display-1 {
        font-size: 2.25rem;
    }

    .display-2 {
        font-size: 2rem;
    }
}