/* ============================================
   AJA AI - Global Typography & Responsive System
   Poppins Font with Reduced Sizes
   ============================================ */

/* Poppins Font Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================================
   Root Variables - Reduced Font Sizes
   ============================================ */
:root {
    /* Typography - Reduced Sizes */
    --font-poppins: 'Poppins', sans-serif;
    
    /* Base Font Sizes - Reduced */
    --font-size-xs: 0.625rem;      /* 10px */
    --font-size-sm: 0.75rem;       /* 12px */
    --font-size-base: 0.875rem;    /* 14px - Default */
    --font-size-md: 1rem;          /* 16px */
    --font-size-lg: 1.125rem;      /* 18px */
    --font-size-xl: 1.25rem;       /* 20px */
    --font-size-2xl: 1.5rem;       /* 24px */
    --font-size-3xl: 1.75rem;      /* 28px */
    --font-size-4xl: 2rem;         /* 32px */
    
    /* Headings - Reduced */
    --h1-size: 1.75rem;            /* 28px */
    --h2-size: 1.5rem;             /* 24px */
    --h3-size: 1.25rem;            /* 20px */
    --h4-size: 1.125rem;           /* 18px */
    --h5-size: 1rem;               /* 16px */
    --h6-size: 0.875rem;           /* 14px */
    
    /* Line Heights - Tighter */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Spacing - Reduced */
    --spacing-xs: 0.25rem;         /* 4px */
    --spacing-sm: 0.5rem;          /* 8px */
    --spacing-md: 1rem;            /* 16px */
    --spacing-lg: 1.5rem;          /* 24px */
    --spacing-xl: 2rem;            /* 32px */
}

/* ============================================
   Global Typography Overrides
   ============================================ */
* {
    font-family: var(--font-poppins) !important;
}

html {
    font-size: 16px; /* Base for rem calculations */
}

body {
    font-family: var(--font-poppins) !important;
    font-size: var(--font-size-base) !important; /* 14px */
    line-height: var(--line-height-normal) !important;
    font-weight: 400 !important;
}

/* ============================================
   Headings - Reduced Sizes
   ============================================ */
h1, .h1 {
    font-size: var(--h1-size) !important;
    font-weight: 700 !important;
    line-height: var(--line-height-tight) !important;
    margin-bottom: var(--spacing-md) !important;
}

h2, .h2 {
    font-size: var(--h2-size) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-tight) !important;
    margin-bottom: var(--spacing-md) !important;
}

h3, .h3 {
    font-size: var(--h3-size) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-tight) !important;
    margin-bottom: var(--spacing-sm) !important;
}

h4, .h4 {
    font-size: var(--h4-size) !important;
    font-weight: 600 !important;
    line-height: var(--line-height-normal) !important;
    margin-bottom: var(--spacing-sm) !important;
}

h5, .h5 {
    font-size: var(--h5-size) !important;
    font-weight: 500 !important;
    line-height: var(--line-height-normal) !important;
    margin-bottom: var(--spacing-sm) !important;
}

h6, .h6 {
    font-size: var(--h6-size) !important;
    font-weight: 500 !important;
    line-height: var(--line-height-normal) !important;
    margin-bottom: var(--spacing-xs) !important;
}

/* ============================================
   Text Elements - Reduced
   ============================================ */
p, .p {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-normal) !important;
    margin-bottom: var(--spacing-sm) !important;
}

small, .small {
    font-size: var(--font-size-sm) !important;
    line-height: var(--line-height-normal) !important;
}

.text-muted {
    font-size: var(--font-size-sm) !important;
    color: #6c757d !important;
}

.lead {
    font-size: var(--font-size-md) !important;
    font-weight: 400 !important;
    line-height: var(--line-height-relaxed) !important;
}

/* ============================================
   Display Classes - Reduced
   ============================================ */
.display-1 {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
}

.display-2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
}

.display-3 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
}

.display-4 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
}

.display-5 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

.display-6 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

/* ============================================
   Bootstrap Font Size Classes - Override
   ============================================ */
.fs-1 {
    font-size: 1.75rem !important;
}

.fs-2 {
    font-size: 1.5rem !important;
}

.fs-3 {
    font-size: 1.25rem !important;
}

.fs-4 {
    font-size: 1.125rem !important;
}

.fs-5 {
    font-size: 1rem !important;
}

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

/* ============================================
   Navigation & Menu Items
   ============================================ */
.navbar-brand,
.navbar-brand h4,
.logo-title {
    font-size: var(--font-size-lg) !important;
    font-weight: 600 !important;
}

.nav-link,
.nav-item a {
    font-size: var(--font-size-base) !important;
    font-weight: 500 !important;
}

.navbar-nav .nav-link {
    font-size: var(--font-size-base) !important;
    padding: 0.5rem 0.75rem !important;
}

/* Sidebar */
.sidebar .nav-link,
.sidebar .item-name {
    font-size: var(--font-size-base) !important;
    font-weight: 500 !important;
}

.sidebar .nav-link i {
    font-size: var(--font-size-md) !important;
}

/* ============================================
   Buttons - Reduced
   ============================================ */
.btn {
    font-size: var(--font-size-base) !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    line-height: var(--line-height-normal) !important;
}

.btn-sm {
    font-size: var(--font-size-sm) !important;
    padding: 0.375rem 0.75rem !important;
}

.btn-lg {
    font-size: var(--font-size-md) !important;
    padding: 0.625rem 1.25rem !important;
}

/* ============================================
   Cards & Components
   ============================================ */
.card-title {
    font-size: var(--h4-size) !important;
    font-weight: 600 !important;
    margin-bottom: var(--spacing-sm) !important;
}

.card-text {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-normal) !important;
}

.card-header {
    font-size: var(--h5-size) !important;
    font-weight: 600 !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

/* ============================================
   Forms
   ============================================ */
.form-label {
    font-size: var(--font-size-base) !important;
    font-weight: 500 !important;
    margin-bottom: var(--spacing-xs) !important;
}

.form-control,
.form-select,
.input-group-text {
    font-size: var(--font-size-base) !important;
    padding: 0.5rem 0.75rem !important;
}

.form-control::placeholder {
    font-size: var(--font-size-sm) !important;
}

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

/* ============================================
   Tables
   ============================================ */
.table {
    font-size: var(--font-size-base) !important;
}

.table th {
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

.table td {
    font-size: var(--font-size-base) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

/* ============================================
   Badges & Labels
   ============================================ */
.badge {
    font-size: var(--font-size-sm) !important;
    font-weight: 500 !important;
    padding: 0.25rem 0.5rem !important;
}

/* ============================================
   Alerts
   ============================================ */
.alert {
    font-size: var(--font-size-base) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

.alert-heading {
    font-size: var(--h5-size) !important;
    font-weight: 600 !important;
}

/* ============================================
   Breadcrumbs
   ============================================ */
.breadcrumb {
    font-size: var(--font-size-sm) !important;
}

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

/* ============================================
   Dropdowns
   ============================================ */
.dropdown-menu {
    font-size: var(--font-size-base) !important;
}

.dropdown-item {
    font-size: var(--font-size-base) !important;
    padding: 0.5rem 1rem !important;
}

/* ============================================
   Modal
   ============================================ */
.modal-title {
    font-size: var(--h4-size) !important;
    font-weight: 600 !important;
}

.modal-body {
    font-size: var(--font-size-base) !important;
}

/* ============================================
   Tooltips & Popovers
   ============================================ */
.tooltip {
    font-size: var(--font-size-sm) !important;
}

.popover {
    font-size: var(--font-size-base) !important;
}

.popover-header {
    font-size: var(--h6-size) !important;
    font-weight: 600 !important;
}

/* ============================================
   Pagination
   ============================================ */
.pagination {
    font-size: var(--font-size-base) !important;
}

.page-link {
    font-size: var(--font-size-base) !important;
    padding: 0.5rem 0.75rem !important;
}

/* ============================================
   List Groups
   ============================================ */
.list-group-item {
    font-size: var(--font-size-base) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

/* ============================================
   Responsive Typography
   ============================================ */

/* Extra Small Devices (phones, 576px and down) */
@media (max-width: 575.98px) {
    html {
        font-size: 14px;
    }
    
    :root {
        --h1-size: 1.5rem;      /* 24px */
        --h2-size: 1.25rem;     /* 20px */
        --h3-size: 1.125rem;    /* 18px */
        --h4-size: 1rem;       /* 16px */
        --h5-size: 0.9375rem;  /* 15px */
        --h6-size: 0.8125rem;  /* 13px */
        --font-size-base: 0.8125rem; /* 13px */
    }
    
    .display-1 { font-size: 2rem !important; }
    .display-2 { font-size: 1.75rem !important; }
    .display-3 { font-size: 1.5rem !important; }
    .display-4 { font-size: 1.25rem !important; }
    
    .navbar-brand,
    .logo-title {
        font-size: var(--font-size-md) !important;
    }
    
    .btn {
        font-size: var(--font-size-sm) !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    .card-title {
        font-size: var(--h5-size) !important;
    }
}

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    html {
        font-size: 15px;
    }
    
    :root {
        --h1-size: 1.625rem;   /* 26px */
        --h2-size: 1.375rem;    /* 22px */
        --h3-size: 1.1875rem;   /* 19px */
        --font-size-base: 0.875rem; /* 14px */
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    html {
        font-size: 15px;
    }
    
    .display-1 { font-size: 2.25rem !important; }
    .display-2 { font-size: 1.875rem !important; }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    html {
        font-size: 15px;
    }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    html {
        font-size: 16px;
    }
}

/* ============================================
   Utility Classes
   ============================================ */
.text-xs {
    font-size: var(--font-size-xs) !important;
}

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

.text-base {
    font-size: var(--font-size-base) !important;
}

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

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

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

/* ============================================
   Specific Component Overrides
   ============================================ */

/* Dashboard Cards */
.dashboard-card h4,
.counter {
    font-size: var(--font-size-xl) !important;
    font-weight: 600 !important;
}

.dashboard-card p {
    font-size: var(--font-size-sm) !important;
}

/* User Profile */
.caption-title {
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
}

.caption-sub-title {
    font-size: var(--font-size-sm) !important;
}

/* Sidebar */
.sidebar-header h4 {
    font-size: var(--font-size-lg) !important;
}

/* Navbar Header */
.iq-navbar-header h1 {
    font-size: var(--h2-size) !important;
    font-weight: 700 !important;
}

.iq-navbar-header p {
    font-size: var(--font-size-base) !important;
}

/* DataTables */
.dataTables_wrapper {
    font-size: var(--font-size-base) !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: var(--font-size-sm) !important;
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    body {
        font-size: 12pt !important;
    }
    
    h1 { font-size: 18pt !important; }
    h2 { font-size: 16pt !important; }
    h3 { font-size: 14pt !important; }
    h4 { font-size: 12pt !important; }
}