/**
 * Mobile-First UX Enhancements
 * Additional styles for blue collar worker optimization
 * Loaded after main styles.css
 * 
 * Breakpoint Standards (matches styles.css):
 * - 320px: Extra small phones (iPhone SE, older Androids)
 * - 375px: Small phones (iPhone 6/7/8, most Androids)
 * - 480px: Large phones (iPhone Plus, phablets)
 * - 768px: Tablets, small laptops
 * - 1024px: Desktop transition
 */

/* === Mobile-First Foundation === */

/* Extra Small Phones (up to 320px) - CRITICAL for no h-scroll */
@media (max-width: 320px) and (hover: none) and (pointer: coarse) {
    body {
        font-size: 16px !important;
        padding: 4px !important;
    }
    
    .container {
        padding: 4px !important;
    }
    
    /* Prevent horizontal scroll - STRICT */
    *, *::before, *::after {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    img, video, iframe, table {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Enforce tap targets on smallest screens */
    button:not(.sidebar-nav-item):not(.sub-nav-btn), .btn, .button, a.btn {
        min-height: 48px !important;
        min-width: 48px !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
    }
    
    /* Full-width buttons on extra small */
    .btn-group, .button-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .btn-group > *, .button-group > * {
        width: 100% !important;
    }
    
    /* Compact cards - fill width */
    .card, .user-dashboard-card, .stat-card {
        padding: 10px 8px !important;
        margin-bottom: 8px !important;
        margin-left: -4px !important;
        margin-right: -4px !important;
        width: calc(100% + 8px) !important;
        border-radius: 8px !important;
    }
    
    /* Hide button text, show icon only on very small screens */
    .btn-icon-text .btn-text {
        display: none !important;
    }
}

/* Small Phones (321px - 374px) */
@media (min-width: 321px) and (max-width: 374px) and (hover: none) and (pointer: coarse) {
    body {
        font-size: 16px !important;
        padding: 8px !important;
    }
    
    .container {
        padding: 8px !important;
    }
    
    /* Prevent horizontal scroll */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Larger tap targets on small screens */
    button:not(.sidebar-nav-item):not(.sub-nav-btn), .btn, .button {
        min-height: 52px !important;  /* Even larger on small screens */
        font-size: 17px !important;
        padding: 14px 20px !important;
    }

    .insight-icon {
        display: none !important;
    }
}

/* === Tab User (Profile) Optimization === */

/* Compact profile photo on mobile */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    .profile-photo-container {
        width: 100px !important;
        height: 100px !important;
        margin: 0 auto 12px;
    }
    
    .profile-photo {
        width: 100px !important;
        height: 100px !important;
        border-radius: 50px !important;
    }
    
    .profile-name {
        font-size: 20px !important;
        font-weight: 700 !important;
        text-align: center;
    }
    
    .profile-position {
        font-size: 14px !important;
        text-align: center;
    }
    
    .status-badge {
        padding: 6px 12px !important;
        font-size: 13px !important;
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
}

@media (max-width: 480px) and (hover: none) and (pointer: coarse) {
    .profile-photo-container {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto 10px;
    }
    
    .profile-photo {
        width: 80px !important;
        height: 80px !important;
        border-radius: 40px !important;
    }
    
    .profile-name {
        font-size: 18px !important;
    }
    
    .profile-position {
        font-size: 13px !important;
    }
}

/* === Tab Agenda (Cards with Icons) === */

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    .agenda-card, .task-card {
        min-height: 56px !important;  /* Compact tap area */
        padding: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .agenda-icon, .task-icon {
        font-size: 24px !important;  /* Smaller icons */
        min-width: 32px !important;
        flex-shrink: 0 !important;
    }
    
    .agenda-status-icon {
        font-size: 20px !important;
        margin-left: auto !important;
    }
    
    .agenda-title {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    
    .agenda-subtitle {
        font-size: 12px !important;
    }
}

/* === Tab Absensi (Check-In Button) === */

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    .attendance-checkin-btn, #check-in-btn, #check-out-btn {
        min-height: 60px !important;  /* Prominent but not giant */
        font-size: 18px !important;
        font-weight: 700 !important;
        border-radius: 12px !important;
        padding: 14px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }
    
    .attendance-checkin-btn i {
        font-size: 24px !important;
    }
    
    .attendance-clock {
        font-size: 36px !important;  /* Smaller clock display */
        font-weight: 700 !important;
        text-align: center !important;
        margin: 14px 0 !important;
    }
    
    .gps-status {
        font-size: 14px !important;
        padding: 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    
    .gps-status i {
        font-size: 18px !important;
    }

    .gps-status,
    .attendance-status-pill,
    #user-attendance-face-reminder {
        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    #user-attendance-history-table td,
    #user-attendance-history-table th {
        font-size: 14px !important;
        padding: 10px 8px !important;
    }
}

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    [data-theme="dark"] .attendance-checkin-btn,
    [data-theme="dark"] #check-in-btn,
    [data-theme="dark"] #check-out-btn,
    [data-theme="dark"] #user-attendance-checkin-btn,
    [data-theme="dark"] #user-attendance-checkout-btn {
        color: #fff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    [data-theme="dark"] .attendance-clock,
    [data-theme="dark"] .gps-status,
    [data-theme="dark"] #user-attendance-face-reminder,
    [data-theme="dark"] #user-attendance-history-table td,
    [data-theme="dark"] #user-attendance-history-table th {
        color: var(--text-primary, #f3f4f6) !important;
    }

    [data-theme="dark"] .gps-status {
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }
}

/* === Modals & Dialogs === */

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    dialog.modal-dialog {
        width: 95% !important;
        max-width: 100% !important;
        padding: 20px !important;
    }
    
    .modal-body button {
        width: 100% !important;  /* Full-width buttons */
        min-height: 52px !important;
        font-size: 17px !important;
        margin-bottom: 8px !important;
    }
    
    .modal-title {
        font-size: 22px !important;
    }
    
    .modal-close-btn {
        min-width: 48px !important;
        min-height: 48px !important;
        font-size: 32px !important;
    }
    
    .modal-body input,
    .modal-body select,
    .modal-body textarea {
        padding: 16px !important;  /* Larger padding */
        font-size: 16px !important;
        min-height: 52px !important;
    }
}

/* === Loading States (Mobile Optimized) === */

/* Larger spinner for mobile touch feedback */
.loading-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    font-size: 16px;
    color: var(--text-secondary);
}

.loading-spinner::before {
    content: '';
    width: 32px;
    height: 32px;
    border: 3px solid rgba(var(--brand-color-rgb, 13, 59, 102), 0.2);
    border-top-color: var(--brand-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Full-screen loading overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 18, 18, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-overlay .spinner-large {
    width: 64px;
    height: 64px;
    border: 4px solid rgba(var(--brand-color-rgb, 13, 59, 102), 0.2);
    border-top-color: var(--brand-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

/* === Toast Notifications (Success/Error) === */

.toast-notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 280px;
    max-width: 90%;
    min-height: 60px;
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 10002;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

.toast-success {
    background: var(--success-color);
    color: #ffffff;
}

.toast-error {
    background: var(--error-color);
    color: white;
}

.toast-warning {
    background: var(--warning-color);
    color: #ffffff;
}

.toast-notification i {
    font-size: 28px;
    flex-shrink: 0;
}

/* === Button Active States === */

button:active:not(.sidebar-nav-item):not(.sub-nav-btn), .btn:active, .button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

button:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* === Icon-First Design Utilities === */

.icon-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 16px !important;
}

.icon-button i {
    font-size: 20px !important;
}

.icon-only {
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 12px !important;
}

.icon-only i {
    font-size: 24px !important;
}

/* Large icon variant for primary actions */
.icon-button-lg {
    min-width: 56px !important;
    min-height: 56px !important;
    font-size: 18px !important;
}

.icon-button-lg i {
    font-size: 28px !important;
}

/* === High Contrast Indicators === */

.status-active {
    color: var(--success-text, var(--success-color)) !important;
    font-weight: 600 !important;
}

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

.status-pending {
    color: var(--warning-text, var(--warning-color)) !important;
    font-weight: 600 !important;
}

.status-error {
    color: var(--error-text, var(--error-color)) !important;
    font-weight: 600 !important;
}

/* === Bottom Nav Enhancement (Mobile) === */

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    .bottom-nav {
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
    }
    
    .bottom-nav-item {
        border-radius: 8px;
        margin: 2px 2px;
    }
    
    .bottom-nav-item i {
        font-size: 28px;
    }
    
    .bottom-nav-item span {
        font-size: 11px;
        font-weight: 600;
    }
    
    .bottom-nav-item.active {
        background: rgba(var(--brand-color-rgb, 13, 59, 102), 0.12);
        color: var(--brand-fg, var(--brand-color));
    }
    
    .bottom-nav-item.active i {
        transform: scale(1.1);
    }
}

/* === Responsive Container Improvements === */

@media (max-width: 480px) and (hover: none) and (pointer: coarse) {
    .card, .info-card, .stat-card {
        padding: 16px !important;  /* Comfortable padding */
    }
    
    .card-title {
        font-size: 18px !important;
    }
    
    .card-text {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* === Focus Visible for Accessibility === */

button:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 3px solid var(--brand-color) !important;
    outline-offset: 2px !important;
}

/* === Prevent Text Selection on Buttons (Better UX) === */

button, .btn, .button, .tab-btn {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(var(--brand-color-rgb, 13, 59, 102), 0.3);
}
/* === Global Tap Target Enforcement (Mobile) === */

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    /* All interactive elements must have minimum 48x48px tap area */
    button:not(.btn-link):not(.close-modal),
    .btn:not(.btn-link),
    .button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        min-height: 48px;
        min-width: 48px;
    }
    
    /* Form inputs - proper height for touch */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="search"],
    select,
    textarea {
        min-height: 48px;
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 12px 14px;
    }
    
    /* Links that look like buttons */
    a.btn,
    a.button,
    .nav-link,
    .sidebar-nav-item,
    .bottom-nav-item {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Table action buttons - expand tap area */
    .actions button,
    td button,
    td .btn,
    .table-actions button {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    
    /* Checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
        margin: 12px;
    }
    
    /* Close buttons in modals */
    .close-modal,
    .btn-close,
    .modal-close-btn,
    [aria-label="Close"] {
        min-width: 48px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* === Card View for Tables (Mobile Alternative) === */

@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    /* Convert table to card view on mobile */
    .table-card-mobile {
        display: block !important;
        width: 100% !important;
    }
    
    .table-card-mobile thead {
        display: none !important;
    }
    
    .table-card-mobile tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .table-card-mobile tr {
        display: flex;
        flex-direction: column;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: 16px;
        gap: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .table-card-mobile tr:hover {
        border-color: var(--brand-color);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    
    .table-card-mobile td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 8px 0;
        border: none;
        border-bottom: 1px solid var(--border-color);
        font-size: 15px;
        line-height: 1.5;
        word-break: break-word;
    }
    
    .table-card-mobile td:last-child {
        border-bottom: none;
    }
    
    /* Label styling */
    .table-card-mobile td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 13px;
        flex-shrink: 0;
        margin-right: 12px;
        min-width: 80px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    /* Hide label for empty data-label */
    .table-card-mobile td:not([data-label])::before,
    .table-card-mobile td[data-label=""]::before {
        display: none;
    }
    
    /* Card value text */
    .table-card-mobile td > * {
        flex: 1;
        text-align: right;
    }
    
    /* Actions cell - buttons in a row */
    .table-card-mobile td.actions,
    .table-card-mobile td.table-actions,
    .table-card-mobile td.actions-cell {
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        flex-wrap: wrap;
        padding-top: 12px;
        margin-top: 4px;
    }
    
    .table-card-mobile td.actions::before,
    .table-card-mobile td.table-actions::before,
    .table-card-mobile td.actions-cell::before {
        display: none;
    }
    
    .table-card-mobile td.actions > *,
    .table-card-mobile td.actions button {
        text-align: left;
        flex: 0 0 auto;
    }
    
    /* Status badges in cards */
    .table-card-mobile .status-badge,
    .table-card-mobile .badge {
        font-size: 12px;
        padding: 4px 10px;
    }
    
    /* First cell as card title */
    .table-card-mobile tr td:first-child {
        font-weight: 600;
        font-size: 16px;
        color: var(--text-primary);
        border-bottom: 2px solid var(--border-color);
        padding-bottom: 12px;
        margin-bottom: 4px;
    }
    
    .table-card-mobile tr td:first-child::before {
        display: none; /* Hide label for title row */
    }
}

/* === Table Responsive Wrapper with Scroll Indicator === */

.table-responsive-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Scroll indicator gradient */
.table-responsive-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, var(--bg-surface-1));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s;
}

/* Hide gradient when fully scrolled */
.table-responsive-wrapper.scrolled-end::after {
    opacity: 0;
}

@media (min-width: 769px) {
    .table-responsive-wrapper::after {
        display: none;
    }
}

/* ============================================
   BLUE COLLAR MVP: Gaji & Notifikasi Sections
   ============================================ */

/* Section page layout */
.bc-section-page {
    padding: 8px 4px 80px;
}

.bc-section-page-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px;
    padding: 0 8px;
}

.bc-section-page-title i {
    font-size: 1.3rem;
    color: var(--brand-fg, var(--brand-color));
}

.bc-mark-all-read-btn {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 500;
}

.bc-mark-all-read-btn:active {
    background: var(--bg-surface-2);
}

.gaji-card-container {
    margin-bottom: 12px;
}

/* Running wage card — big number */
.mobile-card-wage-running .wage-amount-big {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-fg, var(--brand-color));
    line-height: 1.1;
    margin: 4px 0;
}

.mobile-card-wage-running .wage-detail-calc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 4px 0 2px;
}

.mobile-card-wage-running .wage-since-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0 0 10px;
}

.mobile-card-wage-running .wage-last-pay {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--border-color-light, #eee);
}

.wage-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
    font-size: 0.9rem;
}

/* Gaji payment history improvements */
.gaji-pay-row {
    padding: 10px 0;
}

.gaji-pay-row .bc-pay-date {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.gaji-total-paid {
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--bg-surface-2, #f8f9fa);
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}

.gaji-total-paid strong {
    color: var(--brand-fg, var(--brand-color));
}

/* Full-page notification list */
.fullpage-notification-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fullpage-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.fullpage-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    background: var(--bg-surface-1, #fff);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.fullpage-notif-item:active {
    background: var(--bg-surface-2, #f0f0f0);
}

.fullpage-notif-unread {
    background: var(--bg-surface-2, #f0f7ff);
    border-left: 3px solid var(--brand-color);
}

.fullpage-notif-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-surface-2, #e8f0fe);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-fg, var(--brand-color));
    font-size: 1.1rem;
}

.fullpage-notif-body {
    flex: 1;
    min-width: 0;
}

.fullpage-notif-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.3;
}

.fullpage-notif-message {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fullpage-notif-time {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.fullpage-notif-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-color);
    margin-top: 6px;
}

.notification-loading {
    text-align: center;
    color: var(--text-muted);
    padding: 20px;
}

/* Native Capacitor shell forces body.device-mobile / .touch-device even when
   WebView does not match (hover: none) and (pointer: coarse). Keep 16px inputs
   so Android IME does not zoom. */
@media (max-width: 768px) {
    body.device-mobile input[type="text"],
    body.device-mobile input[type="email"],
    body.device-mobile input[type="password"],
    body.device-mobile input[type="number"],
    body.device-mobile input[type="tel"],
    body.device-mobile input[type="url"],
    body.device-mobile input[type="date"],
    body.device-mobile input[type="time"],
    body.device-mobile input[type="datetime-local"],
    body.device-mobile input[type="search"],
    body.device-mobile select,
    body.device-mobile textarea,
    body.touch-device input[type="text"],
    body.touch-device input[type="email"],
    body.touch-device input[type="password"],
    body.touch-device input[type="number"],
    body.touch-device input[type="tel"],
    body.touch-device input[type="url"],
    body.touch-device input[type="date"],
    body.touch-device input[type="time"],
    body.touch-device input[type="datetime-local"],
    body.touch-device input[type="search"],
    body.touch-device select,
    body.touch-device textarea {
        font-size: 16px !important;
        min-height: 48px;
    }
}