/* ========================================
   ERA Financials - Responsive Text Styles
   ======================================== */

/* Base Font Sizes - Mobile First Approach */
html {
    font-size: 14px; /* Base font for mobile */
}

body {
    font-size: 1rem;
    line-height: 1.6;
}

/* ========================================
   Responsive Font Sizes by Breakpoint
   ======================================== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    html {
        font-size: 14px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    html {
        font-size: 15px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    html {
        font-size: 16px;
    }
}

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

/* ========================================
   Headings - Responsive Sizes
   ======================================== */

h1, .h1 {
    font-size: 1.75rem; /* 24.5px on mobile */
}

h2, .h2 {
    font-size: 1.5rem; /* 21px on mobile */
}

h3, .h3 {
    font-size: 1.35rem; /* 18.9px on mobile */
}

h4, .h4 {
    font-size: 1.25rem; /* 17.5px on mobile */
}

h5, .h5 {
    font-size: 1.125rem; /* 15.75px on mobile */
}

h6, .h6 {
    font-size: 1rem; /* 14px on mobile */
}

/* Tablet and up */
@media (min-width: 768px) {
    h1, .h1 { font-size: 2rem; }     /* 30px */
    h2, .h2 { font-size: 1.75rem; }  /* 26.25px */
    h3, .h3 { font-size: 1.5rem; }   /* 22.5px */
    h4, .h4 { font-size: 1.35rem; }  /* 20.25px */
    h5, .h5 { font-size: 1.25rem; }  /* 18.75px */
    h6, .h6 { font-size: 1.125rem; } /* 16.875px */
}

/* Desktop and up */
@media (min-width: 992px) {
    h1, .h1 { font-size: 2.25rem; }  /* 36px */
    h2, .h2 { font-size: 2rem; }     /* 32px */
    h3, .h3 { font-size: 1.75rem; }  /* 28px */
    h4, .h4 { font-size: 1.5rem; }   /* 24px */
    h5, .h5 { font-size: 1.35rem; }  /* 21.6px */
    h6, .h6 { font-size: 1.125rem; } /* 18px */
}

/* ========================================
   Page Title (Dashboard Heading)
   ======================================== */

.page-title, .fs-18 {
    font-size: 1.125rem !important; /* 15.75px on mobile */
}

@media (min-width: 768px) {
    .page-title, .fs-18 {
        font-size: 1.25rem !important; /* 18.75px */
    }
}

@media (min-width: 992px) {
    .page-title, .fs-18 {
        font-size: 1.5rem !important; /* 24px */
    }
}

/* ========================================
   Card Titles
   ======================================== */

.card-title {
    font-size: 1rem; /* 14px on mobile */
}

@media (min-width: 768px) {
    .card-title {
        font-size: 1.125rem; /* 16.875px */
    }
}

@media (min-width: 992px) {
    .card-title {
        font-size: 1.25rem; /* 20px */
    }
}

/* ========================================
   Utility Font Sizes - Responsive
   ======================================== */

/* fs-11 */
.fs-11 {
    font-size: 0.7rem !important; /* 9.8px on mobile */
}

@media (min-width: 768px) {
    .fs-11 { font-size: 0.75rem !important; } /* 11.25px */
}

@media (min-width: 992px) {
    .fs-11 { font-size: 0.6875rem !important; } /* 11px */
}

/* fs-12 */
.fs-12 {
    font-size: 0.75rem !important; /* 10.5px on mobile */
}

@media (min-width: 768px) {
    .fs-12 { font-size: 0.8rem !important; } /* 12px */
}

@media (min-width: 992px) {
    .fs-12 { font-size: 0.75rem !important; } /* 12px */
}

/* fs-13 */
.fs-13 {
    font-size: 0.8rem !important; /* 11.2px on mobile */
}

@media (min-width: 768px) {
    .fs-13 { font-size: 0.85rem !important; } /* 12.75px */
}

@media (min-width: 992px) {
    .fs-13 { font-size: 0.8125rem !important; } /* 13px */
}

/* fs-14 */
.fs-14 {
    font-size: 0.85rem !important; /* 11.9px on mobile */
}

@media (min-width: 768px) {
    .fs-14 { font-size: 0.9rem !important; } /* 13.5px */
}

@media (min-width: 992px) {
    .fs-14 { font-size: 0.875rem !important; } /* 14px */
}

/* fs-15 */
.fs-15 {
    font-size: 0.9rem !important; /* 12.6px on mobile */
}

@media (min-width: 768px) {
    .fs-15 { font-size: 0.95rem !important; } /* 14.25px */
}

@media (min-width: 992px) {
    .fs-15 { font-size: 0.9375rem !important; } /* 15px */
}

/* fs-16 */
.fs-16 {
    font-size: 0.95rem !important; /* 13.3px on mobile */
}

@media (min-width: 768px) {
    .fs-16 { font-size: 1rem !important; } /* 15px */
}

@media (min-width: 992px) {
    .fs-16 { font-size: 1rem !important; } /* 16px */
}

/* ========================================
   Widget Cards
   ======================================== */

.widget-first p {
    font-size: 0.85rem; /* 11.9px on mobile */
}

.widget-first h3 {
    font-size: 0.75rem; /* 10.5px on mobile */
}

@media (min-width: 768px) {
    .widget-first p {
        font-size: 0.9rem; /* 13.5px */
    }
    
    .widget-first h3 {
        font-size: 0.8rem; /* 12px */
    }
}

@media (min-width: 992px) {
    .widget-first p {
        font-size: 0.9375rem; /* 15px */
    }
    
    .widget-first h3 {
        font-size: 0.75rem; /* 12px */
    }
}

/* ========================================
   News Feed & Lists
   ======================================== */

.list-group-item h6 {
    font-size: 0.85rem; /* 11.9px on mobile */
}

.list-group-item .text-muted {
    font-size: 0.75rem; /* 10.5px on mobile */
}

@media (min-width: 768px) {
    .list-group-item h6 {
        font-size: 0.9rem; /* 13.5px */
    }
    
    .list-group-item .text-muted {
        font-size: 0.8rem; /* 12px */
    }
}

@media (min-width: 992px) {
    .list-group-item h6 {
        font-size: 0.9375rem; /* 15px */
    }
    
    .list-group-item .text-muted {
        font-size: 0.875rem; /* 14px */
    }
}

/* ========================================
   Tables
   ======================================== */

.table {
    font-size: 0.8rem; /* 11.2px on mobile */
}

.table thead th {
    font-size: 0.75rem; /* 10.5px on mobile */
}

@media (min-width: 768px) {
    .table {
        font-size: 0.85rem; /* 12.75px */
    }
    
    .table thead th {
        font-size: 0.8rem; /* 12px */
    }
}

@media (min-width: 992px) {
    .table {
        font-size: 0.875rem; /* 14px */
    }
    
    .table thead th {
        font-size: 0.875rem; /* 14px */
    }
}

/* ========================================
   Buttons
   ======================================== */

.btn {
    font-size: 0.85rem; /* 11.9px on mobile */
    padding: 0.5rem 1rem;
}

@media (min-width: 768px) {
    .btn {
        font-size: 0.9rem; /* 13.5px */
        padding: 0.5rem 1.25rem;
    }
}

@media (min-width: 992px) {
    .btn {
        font-size: 0.875rem; /* 14px */
        padding: 0.6rem 1.5rem;
    }
}

.btn-sm {
    font-size: 0.75rem !important; /* 10.5px on mobile */
    padding: 0.4rem 0.8rem;
}

@media (min-width: 768px) {
    .btn-sm {
        font-size: 0.8rem !important; /* 12px */
    }
}

@media (min-width: 992px) {
    .btn-sm {
        font-size: 0.8125rem !important; /* 13px */
    }
}

/* ========================================
   Badges
   ======================================== */

.badge {
    font-size: 0.7rem; /* 9.8px on mobile */
}

@media (min-width: 768px) {
    .badge {
        font-size: 0.75rem; /* 11.25px */
    }
}

@media (min-width: 992px) {
    .badge {
        font-size: 0.75rem; /* 12px */
    }
}

/* ========================================
   Navigation & Sidebar
   ======================================== */

#side-menu a {
    font-size: 0.85rem; /* 11.9px on mobile */
}

.menu-title {
    font-size: 0.7rem; /* 9.8px on mobile */
}

@media (min-width: 768px) {
    #side-menu a {
        font-size: 0.9rem; /* 13.5px */
    }
    
    .menu-title {
        font-size: 0.75rem; /* 11.25px */
    }
}

@media (min-width: 992px) {
    #side-menu a {
        font-size: 0.875rem; /* 14px */
    }
    
    .menu-title {
        font-size: 0.6875rem; /* 11px */
    }
}

/* ========================================
   Topbar
   ======================================== */

.topbar-custom {
    font-size: 0.85rem; /* 11.9px on mobile */
}

@media (min-width: 768px) {
    .topbar-custom {
        font-size: 0.9rem; /* 13.5px */
    }
}

@media (min-width: 992px) {
    .topbar-custom {
        font-size: 0.875rem; /* 14px */
    }
}

/* ========================================
   Forms
   ======================================== */

.form-control,
.form-select,
label {
    font-size: 0.85rem; /* 11.9px on mobile */
}

@media (min-width: 768px) {
    .form-control,
    .form-select,
    label {
        font-size: 0.9rem; /* 13.5px */
    }
}

@media (min-width: 992px) {
    .form-control,
    .form-select,
    label {
        font-size: 0.875rem; /* 14px */
    }
}

/* ========================================
   Modals
   ======================================== */

.modal-title {
    font-size: 1rem; /* 14px on mobile */
}

.modal-body {
    font-size: 0.85rem; /* 11.9px on mobile */
}

@media (min-width: 768px) {
    .modal-title {
        font-size: 1.125rem; /* 16.875px */
    }
    
    .modal-body {
        font-size: 0.9rem; /* 13.5px */
    }
}

@media (min-width: 992px) {
    .modal-title {
        font-size: 1.25rem; /* 20px */
    }
    
    .modal-body {
        font-size: 1rem; /* 16px */
    }
}

/* ========================================
   Footer
   ======================================== */

.footer {
    font-size: 0.75rem; /* 10.5px on mobile */
}

@media (min-width: 768px) {
    .footer {
        font-size: 0.8rem; /* 12px */
    }
}

@media (min-width: 992px) {
    .footer {
        font-size: 0.8125rem; /* 13px */
    }
}

/* ========================================
   Dropdown Menu
   ======================================== */

.dropdown-menu {
    font-size: 0.8rem; /* 11.2px on mobile */
}

@media (min-width: 768px) {
    .dropdown-menu {
        font-size: 0.85rem; /* 12.75px */
    }
}

@media (min-width: 992px) {
    .dropdown-menu {
        font-size: 0.875rem; /* 14px */
    }
}

/* ========================================
   Chatbot - Responsive Text
   ======================================== */

.chat-header h4 {
    font-size: 0.9rem; /* 12.6px on mobile */
}

.chat-status {
    font-size: 0.7rem; /* 9.8px on mobile */
}

.message-text {
    font-size: 0.85rem; /* 11.9px on mobile */
}

.message-time {
    font-size: 0.65rem; /* 9.1px on mobile */
}

.chat-input {
    font-size: 0.85rem; /* 11.9px on mobile */
}

.chat-input-hint {
    font-size: 0.65rem; /* 9.1px on mobile */
}

@media (min-width: 768px) {
    .chat-header h4 {
        font-size: 1rem; /* 15px */
    }
    
    .chat-status {
        font-size: 0.75rem; /* 11.25px */
    }
    
    .message-text {
        font-size: 0.875rem; /* 13.125px */
    }
    
    .message-time {
        font-size: 0.6875rem; /* 10.3125px */
    }
    
    .chat-input {
        font-size: 0.875rem; /* 13.125px */
    }
    
    .chat-input-hint {
        font-size: 0.6875rem; /* 10.3125px */
    }
}

@media (min-width: 992px) {
    .chat-header h4 {
        font-size: 1.125rem; /* 18px */
    }
    
    .chat-status {
        font-size: 0.75rem; /* 12px */
    }
    
    .message-text {
        font-size: 0.875rem; /* 14px */
    }
    
    .message-time {
        font-size: 0.6875rem; /* 11px */
    }
    
    .chat-input {
        font-size: 0.875rem; /* 14px */
    }
    
    .chat-input-hint {
        font-size: 0.6875rem; /* 11px */
    }
}

/* ========================================
   Tutorial Help Button - Responsive Text
   ======================================== */

.btn-tutorial-help {
    font-size: 0.85rem; /* 11.9px on mobile */
}

.tutorial-menu-header h4 {
    font-size: 0.9rem; /* 12.6px on mobile */
}

.tutorial-section h5 {
    font-size: 0.7rem; /* 9.8px on mobile */
}

.tutorial-menu-item {
    font-size: 0.8rem; /* 11.2px on mobile */
}

@media (min-width: 768px) {
    .btn-tutorial-help {
        font-size: 0.9rem; /* 13.5px */
    }
    
    .tutorial-menu-header h4 {
        font-size: 1rem; /* 15px */
    }
    
    .tutorial-section h5 {
        font-size: 0.75rem; /* 11.25px */
    }
    
    .tutorial-menu-item {
        font-size: 0.85rem; /* 12.75px */
    }
}

@media (min-width: 992px) {
    .btn-tutorial-help {
        font-size: 1rem; /* 16px */
    }
    
    .tutorial-menu-header h4 {
        font-size: 1.125rem; /* 18px */
    }
    
    .tutorial-section h5 {
        font-size: 0.75rem; /* 12px */
    }
    
    .tutorial-menu-item {
        font-size: 0.875rem; /* 14px */
    }
}

/* ========================================
   Extra Small Devices - Additional Adjustments
   ======================================== */

@media (max-width: 575px) {
    /* Make text slightly larger on very small phones */
    body {
        font-size: 1.05rem;
    }
    
    /* Ensure minimum touch target sizes */
    .btn {
        min-height: 44px;
    }
    
    /* Tighter spacing on small screens */
    .card-body {
        padding: 0.75rem;
    }
    
    /* Smaller gaps */
    .row.g-3 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }
}

/* ========================================
   Text Truncation Utilities
   ======================================== */

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

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

/* ========================================
   Line Height Adjustments for Readability
   ======================================== */

@media (max-width: 767px) {
    body {
        line-height: 1.5;
    }
    
    p {
        line-height: 1.6;
    }
}

@media (min-width: 768px) {
    body {
        line-height: 1.6;
    }
    
    p {
        line-height: 1.7;
    }
}

/* ========================================
   Prevent Text Zoom on iOS
   ======================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    font-size: 16px !important; /* Prevents iOS zoom */
}

@media (min-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 0.9rem !important;
    }
}

@media (min-width: 992px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 0.875rem !important;
    }
}