/* =====================================================
   responsive.css — Mobile responsive rules for mailhub-admin
   Loaded after page-specific CSS on all client & auth pages.
   ===================================================== */

/* === Hamburger button (hidden on desktop, shown on ≤1024px) === */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: calc(25px + env(safe-area-inset-top, 0px));
    left: 21px;
    z-index: 64;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 0;
}
.sidebar-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #374151;
    border-radius: 1px;
    transition: transform 0.3s, opacity 0.3s;
}
.sidebar-toggle.active {
    background: #1e100a;
    border-color: #1e100a;
    box-shadow: none;
}
.sidebar-toggle.active span {
    background: #fff;
}
.sidebar-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.sidebar-toggle.active span:nth-child(2) {
    opacity: 0;
}
.sidebar-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* === Mobile logo (hidden on desktop) === */
.mobile-logo {
    display: none;
    position: fixed;
    top: calc(-1px + env(safe-area-inset-top, 0px));
    left: calc(50% - 10px);
    transform: translateX(-50%);
    z-index: 62;
}
.mobile-logo img {
    height: 80px;
}
.mobile-logo::after {
    content: '';
    display: none;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background: #e5e7eb;
}

/* === Mobile notification bell (hidden on desktop) === */
.mobile-notif-bell {
    display: none;
    position: fixed;
    top: calc(26px + env(safe-area-inset-top, 0px));
    z-index: 62;
    color: #000;
    text-decoration: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.mobile-notif-bell svg {
    fill: #fff;
}
.mobile-notif-dot {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 2px #fff;
}
.mobile-notif-dot.visible {
    display: block;
}

/* === Sidebar logout link (hidden on desktop, shown on mobile) === */
.sidebar-logout-link {
    display: none;
}
.sidebar-logout-divider {
    display: none;
}

/* === Mobile header background (fixed white strip behind logo/hamburger/bell) === */
.mobile-header-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: #fff;
    z-index: 60;
    border-bottom: 1px solid #e5e7eb;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* === Overlay backdrop === */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 56;
}
.sidebar-overlay.active {
    display: block;
}


/* ============================
   TABLET — max-width: 1024px
   ============================ */
@media (max-width: 1024px) {
    /* Make html/body non-scrolling so white bg always covers status bar */
    html { overflow: hidden; height: 100%; background: #fff; }
    body { overflow: hidden; height: 100%; max-width: 100vw; background: #fff; padding-top: 0; }
    /* .main becomes the scroll container */
    .main {
        background: #f5f7fa;
        overflow-y: auto;
        height: 100dvh;
        height: 100vh; /* fallback for older browsers */
        -webkit-overflow-scrolling: touch;
    }
    @supports (height: 100dvh) {
        .main { height: 100dvh; }
    }

    /* Hamburger + mobile logo + bell + header bg visible, hide sidebar logo */
    .mobile-header-bg { display: block; }
    .sidebar-toggle { display: flex; }
    .mobile-logo { display: block; }
    .mobile-logo::after { display: none; }
    .mobile-notif-bell { display: flex; right: 16px; }
    .sidebar-logo { display: none; }
    .sidebar-plan-badge {
        position: fixed;
        top: calc(28px + env(safe-area-inset-top, 0px));
        left: calc(21px + 38px + 20px); /* hamburger left + width + 20px gap */
        z-index: 65;
        margin-bottom: 0;
    }

    /* Sidebar: off-canvas, extra top padding for hamburger clearance */
    .sidebar {
        transform: translateX(-100%);
        padding-top: calc(110px + env(safe-area-inset-top, 0px));
        z-index: 63;
        min-height: 0;
        height: 100%;
        height: 100dvh;
    }
    .sidebar.animated {
        transition: transform 0.3s ease;
    }
    .sidebar.open {
        transform: translateX(0);
    }

    /* Main: full width */
    .main {
        margin-left: 0;
        padding: calc(72px + env(safe-area-inset-top, 0px)) 24px 24px;
        max-width: 100vw;
    }

    /* Unified button height on mobile (match btn-compare: ~38px) */
    .btn-primary,
    .btn-cancel,
    .btn-save,
    .btn-filter,
    .btn-reset,
    .btn-compare,
    .btn-select-courier {
        min-height: 36px;
        padding-top: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    /* Header user: hidden on mobile (logout moved to sidebar) */
    .header-user {
        display: none;
    }

    /* Sidebar logout: visible on mobile */
    .sidebar-logout-divider {
        display: block !important;
    }
    .sidebar-logout-link {
        display: flex !important;
        color: #ef4444 !important;
    }
    .sidebar-logout-link .nav-icon {
        opacity: 1 !important;
        stroke: #ef4444;
    }

    /* Main: starts after header bar + line, bottom padding includes safe-area for home indicator */
    .main {
        margin-top: 0;
        padding: 103px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Back button: same level as header-user, on the left */
    .header-back-btn {
        left: 16px;
        top: 100px;
    }

    /* Dashboard widgets: stack main chart, 2-col for rest */
    .widgets {
        grid-template-columns: 1fr 1fr;
    }
    .widgets > :first-child {
        grid-column: 1 / -1;
    }

    /* Subscriptions plans: 2 columns */
    .plans-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================
   TABLET PORTRAIT — max-width: 768px
   ============================ */
@media (max-width: 768px) {
    .main {
        padding: 68px 20px 24px;
    }

    /* Stat grids: 2 columns */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .stat-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Chart grid: stack */
    .chart-grid {
        grid-template-columns: 1fr !important;
    }

    /* Dashboard widgets: stack */
    .widgets {
        grid-template-columns: 1fr;
    }
    .widgets > :first-child {
        grid-column: auto;
    }

    /* Usage grid: 2 columns */
    .usage-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Form row 3-col: 2 columns */
    .form-row-3 {
        grid-template-columns: 1fr 1fr;
    }

    /* Tables: horizontal scroll */
    .table-wrap {
        overflow-x: auto;

    }
    .table-wrap table {
        min-width: 600px;
    }

    /* Page header: wrap */
    .page-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Tab bars: horizontal scroll */
    .tab-bar {
        overflow-x: auto;

    }
    .tab-bar-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Profile tabs: scroll */
    .tabs {
        overflow-x: auto;

    }
    .tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Modals: wider on tablet */
    .modal {
        max-width: 90vw;
    }
    .ticket-modal {
        max-width: 95vw;
        padding: 20px;
    }
    .history-modal {
        max-width: 90vw;
    }

    /* Filters: column layout */
    .filters {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-group {
        width: 100%;
    }
    .filter-group input,
    .filter-group select {
        width: 100%;
    }

    /* Date range: wrap */
    .date-range {
        flex-wrap: wrap;
    }
    .date-range input[type="date"] {
        flex: 1;
        min-width: 120px;
    }

    /* Quick actions: wrap */
    .quick-actions {
        flex-wrap: wrap;
    }

    /* Analytics tables: scroll */
    .table-card {
        overflow-x: auto;
    }
    .table-card table {
        min-width: 450px;
    }

    /* Subscription info: reduce gap */
    .subscription-info-grid {
        gap: 16px;
    }

    /* Auth pages: tighter padding */
    .login-card,
    .register-card {
        padding: 24px;
    }

    /* Sender tabs: scroll horizontally */
    .sender-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .sender-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Widget cards: single column on tablet */
    .widget-cards-grid {
        grid-template-columns: 1fr;
    }

    /* Profile bottom row: stack vertically */
    .profile-bottom-row {
        grid-template-columns: 1fr;
    }

    /* Password fields: single column */
    .pw-fields-grid {
        grid-template-columns: 1fr;
    }

    /* Notification cards: stack vertically */
    .notif-cards-grid {
        grid-template-columns: 1fr;
    }

    /* Couriers table: hide Rating column */
    #tab-couriers table th:nth-child(3),
    #tab-couriers table td:nth-child(3) {
        display: none;
    }

    /* User form header: gap on mobile */
    .user-form-header { gap: 14px; }

    /* Widget cards: compact on mobile */
    .widget-card-header { padding: 10px 12px; gap: 10px; }
    .widget-card-icon { width: 32px; height: 32px; }
    .widget-card-body { padding: 10px 12px; gap: 8px; }
    .widget-field-row { gap: 6px; }
    .widget-currency-row { flex-wrap: wrap; }
    .widget-clock-row .widget-field--city-select { flex: 0 0 140px; }

}


/* ============================
   MOBILE — max-width: 640px
   ============================ */
@media (max-width: 640px) {
    .main {
        padding: 119px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Header: compact — push below the 80px mobile logo */
    .header-user {
        right: 16px;
        top: 96px;
    }
    .header-user-info {
        display: none;
    }
    .header-back-btn {
        position: static;
        font-size: 0;
        width: 36px;
        height: 36px;
        padding: 0;
        display: none;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        box-sizing: border-box;
    }
    .header-back-btn.visible,
    a.header-back-btn {
        display: flex;
    }
    .header-back-btn::before {
        content: '\2190';
        font-size: 18px;
        line-height: 1;
        display: block;
    }

    /* Page header: row layout so back button + title sit on one line */
    .page-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        position: relative;
        padding-left: 0;
    }
    /* When back button visible, add left padding for it */
    .page-header:has(.header-back-btn.visible),
    .page-header:has(a.header-back-btn) {
        padding-left: 46px;
    }
    .page-header .header-back-btn {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    .page-header h1 {
        font-size: 18px;
    }
    .page-header p {
        font-size: 12px;
    }

    /* Stat grids: compact 2 columns */
    .stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }
    .stat-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }
    .stat-card-value,
    .stat-value {
        font-size: 20px;
    }
    .stat-card-header { padding: 8px 12px; }
    .stat-card-body { padding: 10px 12px; }
    .stat-card-icon { width: 28px; height: 28px; }
    .stat-card-label,
    .stat-label {
        font-size: 11px;
    }

    /* All 2-col grids: stack */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    /* Address row: keep 2-col (input + icon button) */
    .form-row:has(.btn-map-toggle) {
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: end;
    }
    .form-row:has(.btn-map-toggle) > .form-group:last-child {
        display: flex !important;
        align-items: flex-end !important;
        margin-bottom: 14px;
    }
    .btn-map-toggle {
        font-size: 0 !important;
        width: 38px;
        height: 38px;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }
    .btn-map-toggle::before {
        content: '\1F4CD';
        font-size: 18px;
        line-height: 1;
    }
    .form-row-3 {
        grid-template-columns: 1fr;
    }
    .detail-grid {
        grid-template-columns: 1fr 1fr;
    }
    .info-blocks-row {
        grid-template-columns: 1fr;
    }
    /* Collapsible sender/recipient blocks */
    .info-block--collapsible .info-block-title {
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    .info-block--collapsible .info-block-chevron {
        display: block;
        width: 18px; height: 18px;
        margin-left: auto;
        flex-shrink: 0;
        transition: transform 0.2s;
        transform: rotate(-90deg);
    }
    .info-block--collapsible .info-block-body {
        display: none;
    }
    .info-block--collapsible.info-block--open .info-block-title {
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e5e7eb;
    }
    .info-block--collapsible.info-block--open .info-block-body {
        display: grid;
    }
    .info-block--collapsible.info-block--open .info-block-chevron {
        transform: rotate(0deg);
    }
    .ticket-order-row {
        grid-template-columns: 1fr;
    }
    .ticket-meta-grid {
        grid-template-columns: 1fr;
    }
    .sender-details-grid {
        grid-template-columns: 1fr;
    }

    /* Plans: single column */
    .plans-grid {
        grid-template-columns: 1fr !important;
    }
    .usage-grid {
        grid-template-columns: 1fr;
    }

    /* Tables: scroll with smaller min-width */
    .table-wrap table {
        min-width: 500px;
    }

    /* Modals: bottom-sheet style */
    .modal-overlay {
        align-items: flex-end;
    }
    .modal {
        max-width: 100vw;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        padding: 20px;
    }
    .ticket-modal {
        max-width: 100vw;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
        padding: 16px;
    }
    .history-modal {
        max-width: 100vw;
        max-height: 95vh;
        border-radius: 16px 16px 0 0;
    }
    .plan-modal {
        max-width: 100vw;
        border-radius: 16px 16px 0 0;
    }
    .modal-box {
        max-width: 100vw;
        border-radius: 16px 16px 0 0;
    }
    .modal-box .form-group {
        margin-bottom: 10px;
    }
    .modal-actions {
        margin-top: 12px;
    }
    .confirm-dialog {
        max-width: 100vw;
        border-radius: 16px 16px 0 0;
    }

    /* Toolbar: row layout, search smaller */
    .toolbar {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }
    .search-wrap {
        flex: 1;
        min-width: 0;
        max-width: 75%;
    }
    .search-wrap .search-input {
        width: 100%;
        font-size: 16px;
    }

    /* Button rows: side by side */
    .modal-actions {
        flex-direction: row;
    }
    .modal-actions button {
        flex: 1;
    }
    .submit-section {
        flex-direction: column;
        align-items: center;
    }
    .submit-section button {
        width: auto;
    }

    /* Tab bar: smaller padding */
    .tab-bar-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Sender tabs: scroll */
    .sender-tabs {
        overflow-x: auto;

    }
    .sender-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Notification cards: tighter */
    .notif-card {
        padding: 12px 16px;
    }

    /* Bank cards: wrap actions */
    .bank-card-item {
        flex-wrap: wrap;
    }
    .bank-card-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 8px;
    }

    /* Toast: wider */
    .inline-msg {
        max-width: 90vw;
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Pagination: stack */
    .pagination {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    /* Courier list: card layout on mobile */
    .courier-item {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
    }
    .courier-name {
        min-width: auto;
        flex: 1;
        font-size: 13px;
        word-break: break-word;
    }
    .courier-stats {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
    .courier-stat {
        text-align: center;
    }
    .courier-stat-value {
        font-size: 13px;
    }
    .courier-stat-label {
        font-size: 10px;
    }
    .courier-bar-wrap {
        width: 100%;
        max-width: 100%;
    }

    /* Dashboard sections: reorder quick-actions above clock on mobile */
    #dashboardSections {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .dashboard-section[data-section-id="stat-grid"] { order: 1; }
    .dashboard-section[data-section-id="quick-actions"] { order: 2; }
    .dashboard-section[data-section-id="clock"] { order: 3; }
    .dashboard-section[data-section-id="widgets"] { order: 4; }
    .dashboard-section[data-section-id="calendar-couriers"] { order: 5; }

    /* Quick action buttons: single row */
    .quick-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        max-width: 100%;
        overflow: hidden;
    }
    .quick-action-btn {
        height: 44px;
        padding: 0 8px;
        font-size: 12px;
        border-radius: 10px;
        justify-content: center;
        min-width: 0;
    }

    /* Auth pages: tighter */
    .login-container,
    .register-container {
        padding: 0 16px;
    }
    .login-card,
    .register-card {
        padding: 20px;
    }
    .login-logo img,
    .register-logo img {
        width: 180px;
    }

    /* Register: code inputs responsive */
    .code-inputs input {
        width: 40px;
        height: 44px;
        font-size: 18px;
    }

    /* Addresses: search takes remaining space */
    .search-wrap {
        flex: 1;
        min-width: 0;
    }
    .search-wrap .search-input {
        width: 100% !important;
        font-size: 16px;
    }
    /* Addresses: export button square icon on mobile (match orders style) */
    .toolbar .btn-export {
        font-size: 0;
        width: 36px;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        box-sizing: border-box;
        gap: 0;
        flex-shrink: 0;
    }
    .toolbar .btn-export svg {
        width: 15px;
        height: 15px;
    }

    /* Profile form row in modal */
    .modal-form-row {
        grid-template-columns: 1fr;
    }

    /* Filters bar (notifications) */
    .filters-bar {
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
    }
    .filters-bar select {
        flex: 1;
        min-width: 0;
    }

    /* Maps: reduce height */
    #addressMap,
    #profileMap {
        height: 200px !important;
    }

    /* Tab bar: horizontal scroll on mobile */
    .tab-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tab-bar-btn {
        flex-shrink: 0;
    }
    .tab-bar-btn.tab-create {
        margin-left: auto;
        flex-shrink: 0;
    }
    .tab-bar-btn.tab-create {
        font-size: 0;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
    }
    .tab-bar-btn.tab-create::before {
        content: '+';
        font-size: 20px;
        font-weight: 600;
        line-height: 1;
    }
    .tab-bar-actions {
        flex: 0 0 auto;
        display: flex;
        gap: 6px;
        align-items: center;
        margin-left: auto;
    }
    .tab-new-order {
        font-size: 0;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        box-sizing: border-box;
        background: #22c55e;
        color: #fff;
        border-color: #22c55e;
    }
    .tab-new-order::before {
        content: '+';
        font-size: 20px;
        font-weight: 600;
        line-height: 1;
    }
    .tab-bar-actions .btn-export {
        font-size: 0;
        width: 36px;
        height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        box-sizing: border-box;
        gap: 0;
    }
    .tab-bar-actions .btn-export svg {
        width: 18px;
        height: 18px;
    }
    .tab-add-btn {
        flex-shrink: 0;
        font-size: 0;
        width: 36px;
        height: 36px;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        box-sizing: border-box;
    }
    .tab-add-btn::before {
        content: '+';
        font-size: 20px;
        font-weight: 600;
        line-height: 1;
    }

    /* Export button: full width (except in tab-bar-actions and toolbar) */
    .btn-export:not(.tab-bar-actions .btn-export):not(.toolbar .btn-export) {
        width: 100%;
        justify-content: center;
    }

    /* Subscription: Loom-style stacked on mobile */
    .plan-billing-toggle { margin: 0 20px 20px; }
    .plan-billing-btn { font-size: 13px; padding: 8px 0; }
    .plan-billing-save { font-size: 9px; }

    .plans-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    .plan-card { border-radius: 12px; }
    .plan-card.recommended {
        box-shadow: 0 0 0 1px #FF8C00;
    }
    .plan-header-area { padding: 24px 20px 0; }
    .plan-name { font-size: 18px; }
    .plan-desc { font-size: 13px; min-height: 0; margin-bottom: 16px; }
    .plan-price-area { padding: 0 20px 20px; }
    .plan-price { font-size: 28px; }
    .plan-badge { top: -10px; font-size: 10px; padding: 3px 12px; }
    .plan-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: calc(100% - 40px);
        margin: 0 20px 8px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #6b7280;
        cursor: pointer;
        font-family: inherit;
    }
    .plan-toggle svg { transition: transform 0.2s; }
    .plan-card.expanded .plan-toggle svg { transform: rotate(180deg); }
    .plan-divider { display: none; }
    .plan-details { display: none; padding: 0 20px 20px; }
    .plan-card.expanded .plan-details { display: block; }
    .plan-btn-area { padding: 0 20px 20px; }
    .plan-features li { font-size: 13px; }

    .subscription-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .subscription-info-item {
        padding: 0; border-right: none;
    }
    .subscription-info { padding: 16px; }
    .pending-plan-badge {
        display: flex; flex-direction: column; gap: 8px;
        font-size: 12px; line-height: 1.4;
    }
    .btn-cancel-pending {
        width: 100%; padding: 6px 12px;
        font-size: 12px; margin-left: 0;
    }

    /* History */
    .history-list-header { display: none; }
    .history-card {
        flex-wrap: wrap; gap: 4px; padding: 10px 0;
    }
    .hc-date { width: auto; font-size: 12px; }
    .hc-type { width: auto; }
    .hc-old, .hc-new { flex: none; width: 100%; font-size: 12px; }
    .hc-old::before { content: 'Было: '; color: #9ca3af; font-weight: 400; }
    .hc-new::before { content: 'Стало: '; color: #9ca3af; font-weight: 400; }
    .hc-amount { width: 100%; text-align: left; }

    .usage-grid { grid-template-columns: 1fr; }


    /* Date range: dates on one row, button below */
    .date-range {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }
    .date-range input[type="date"] {
        flex: 1;
        min-width: 0;
    }
    .date-range-sep {
        display: none;
    }
    .date-range-apply {
        width: 100%;
    }

    /* History filters: compact rows like Analytics */
    .history-filters {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .hf-left {
        display: flex;
        gap: 6px;
        width: 100%;
    }
    .hf-left input[type="text"] {
        flex: 1;
        min-width: 0;
        width: auto;
    }
    .hf-left .btn-reset,
    .hf-left .btn-filter {
        flex-shrink: 0;
    }
    .hf-right { display: none; }
    .hf-dates {
        display: flex;
        gap: 6px;
        align-items: center;
        width: 100%;
    }
    .hf-dates input[type="date"] {
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
    }
    .hf-dates .date-range-sep {
        flex-shrink: 0;
    }
    .hf-selects {
        display: flex;
        gap: 6px;
        width: 100%;
    }
    .hf-selects select {
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Compare table: horizontal scroll */
    .compare-section {
        padding: 16px;
    }
    .compare-results {
        overflow-x: auto;
    }
    .compare-table {
        min-width: 450px;
    }

    /* Form sections: tighter padding */
    .form-section {
        padding: 16px;
    }

    /* New order form: full width inputs */
    .new-order-wrap {
        max-width: 100%;
    }

    /* Sender details grid: single column */
    .sender-details-grid {
        grid-template-columns: 1fr;
    }

    /* Confirm dialog: tighter */
    .confirm-row {
        flex-direction: column;
        gap: 2px;
    }
    .confirm-val {
        max-width: 100%;
        text-align: left;
    }

    /* Form actions: stack buttons */
    .form-actions {
        flex-direction: column;
        gap: 8px;
    }
    .form-actions button {
        width: 100%;
    }

    /* Form card: tighter padding */
    .form-card {
        padding: 16px;
    }

    /* Detail card: tighter padding */
    .detail-card {
        padding: 16px;
    }

    /* Detail header: title and buttons on one line */
    .detail-card-header {
        flex-wrap: nowrap;
        gap: 8px;
    }
    .detail-card-header h2 {
        font-size: 16px;
        flex: 1;
        min-width: 0;
    }

    /* Action buttons in detail: same compact size */
    .btn-map-route,
    .btn-ticket-link {
        padding: 6px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Profile tabs: compact padding */
    .tabs {
        flex-wrap: nowrap;
    }
    .tab {
        padding: 8px 12px;
        font-size: 13px;
    }

    /* Courier stats: tighter gap */
    .courier-stats {
        gap: 12px;
    }

    /* Dashboard weather/currency: compact */
    .weather-icon {
        font-size: 24px;
    }
    .weather-temp {
        font-size: 22px;
    }
    .currency-row {
        font-size: 12px;
    }

    /* Export button: icon-only on mobile */
    .btn-export {
        margin-left: 0;
        font-size: 0;
        width: 36px;
        height: 36px;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .btn-export svg {
        width: 18px;
        height: 18px;
    }

    /* Back button: already handled above (square icon-only) */

    /* Widget cards: tighter + prevent overflow */
    .widgets {
        gap: 12px;
    }
    .widget {
        overflow: hidden;
        min-width: 0;
    }
    .widget-header {
        padding: 12px 16px;
    }
    .widget-header h3 {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .widget-header a {
        flex-shrink: 0;
    }
    .widget-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .widget-body table {
        min-width: 0;
    }

    /* Ticket items: prevent badge overflow */
    .ticket-item {
        padding: 10px 16px;
    }
    .ticket-subject {
        white-space: normal;
        word-break: break-word;
    }
    .ticket-badge {
        font-size: 10px;
        padding: 2px 6px;
        flex-shrink: 0;
    }

    /* Ticket list → mobile cards */
    .ticket-list-header { display: none; }
    .ticket-card {
        flex-wrap: wrap;
        padding: 12px 14px;
        gap: 6px 10px;
        position: relative;
    }
    .tc-id { width: auto; font-size: 12px; }
    .tc-subject {
        width: 100%; flex: none; order: -1;
        white-space: normal; word-break: break-word;
        font-size: 14px; margin-bottom: 2px;
    }
    .tc-order { width: auto; font-size: 12px; }
    .tc-priority { width: auto; }
    .tc-status { width: auto; }
    .tc-updated { width: auto; font-size: 11px; color: #9ca3af; }
    .tc-actions { display: none; }

    /* Create ticket → plus icon in tab bar (matching .tab-new-order) */
    .tab-new-ticket {
        margin-left: auto;
        font-size: 0;
        min-width: 36px;
        min-height: 36px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #22c55e;
        color: #fff;
        border-color: #22c55e;
    }
    .tab-new-ticket::before {
        content: '+';
        font-size: 20px;
        font-weight: 600;
        line-height: 1;
    }

    /* Notification items: tighter padding */
    .notif-item {
        padding: 10px 16px;
    }
    .notif-title {
        font-size: 12px;
        word-break: break-word;
    }
    .notif-msg {
        font-size: 11px;
    }

    /* Ticket modal: compact */
    .ticket-modal {
        padding: 14px;
    }
    .ticket-reply-footer {
        flex-direction: column;
        gap: 8px;
    }
    .ticket-reply-footer button {
        width: 100%;
    }

    /* Profile page: remove max-width cap */
    .main {
        max-width: 100%;
    }

    /* Profile cards: tighter padding */
    .card {
        padding: 16px;
    }
    .card h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }
    h3.user-form-title,
    h3.pw-card-title {
        margin-bottom: 6px;
    }

    /* Save button: full width */
    .btn-save {
        width: 100%;
        text-align: center;
    }

    /* Modal form-row: keep 2 columns for short fields (month/year) */
    .modal-box .form-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Couriers table: stretch to full card width */
    #tab-couriers .card {
        padding: 16px 0;
    }
    #tab-couriers .card h3,
    #tab-couriers .card > p {
        padding: 0 16px;
    }
    #tab-couriers table {
        width: 100%;
    }
    #tab-couriers table th,
    #tab-couriers table td {
        padding: 10px 8px;
        font-size: 13px;
    }
    #tab-couriers #courierPrefsActions {
        padding: 0 16px;
    }

    /* Widget save buttons: match .btn-primary sizing */
    .widget-save-btn {
        height: 32px !important;
        padding: 0 18px !important;
    }
    /* Widget inputs */
    .widget-field-input {
        height: 32px !important;
    }
    /* Currency row: stack fields, keep save btn inline with pairs */
    .widget-currency-row {
        flex-wrap: wrap;
    }
    .widget-currency-row .widget-field--base {
        max-width: 60px;
    }
    .widget-currency-row .widget-field--pairs {
        flex: 1 1 0;
        min-width: 0;
    }
    .widget-currency-row .widget-save-btn {
        align-self: flex-end;
    }
    #currencySettingsRow > .widget-field-hint {
        display: none;
    }

    /* Bank cards header: stack on small screens */
    .cards-header {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    /* Users header: icon+title left, plus button top-right */
    #userListCard .cards-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        position: relative;
    }
    #userListCard .user-list-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    #userListCard .user-list-title {
        font-size: 15px;
        line-height: 1;
        margin-bottom: 0;
    }
    #userListCard .user-list-desc {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1;
    }
    #userListCard .users-header-right {
        position: absolute;
        top: 0;
        right: 0;
    }
    /* Users table: card layout on mobile */
    #userListCard .users-table thead {
        display: none;
    }
    #userListCard .users-table {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    #userListCard .users-table tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    #userListCard .users-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto;
        position: relative;
        padding: 14px 16px;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        gap: 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    #userListCard .users-table td {
        border: none;
        padding: 0;
        font-size: 13px;
    }
    /* Name — row 1, col 1 */
    #userListCard .users-table td:first-child {
        grid-column: 1;
        grid-row: 1;
        font-size: 15px;
        font-weight: 600;
        color: #111827;
        display: flex;
        align-items: center;
        gap: 6px;
        padding-bottom: 10px;
        border-bottom: 1px solid #f3f4f6;
        margin-bottom: 10px;
    }
    /* Actions — row 1, col 2 */
    #userListCard .users-table td:nth-child(6) {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-bottom: 10px;
        border-bottom: 1px solid #f3f4f6;
        margin-bottom: 10px;
    }
    /* Info rows with icons — grid col 1-2 */
    #userListCard .users-table td:nth-child(2),
    #userListCard .users-table td:nth-child(3),
    #userListCard .users-table td:nth-child(4),
    #userListCard .users-table td:nth-child(5) {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        color: #6b7280;
        font-size: 13px;
    }
    /* Icons via ::before */
    #userListCard .users-table td:nth-child(2)::before {
        content: '';
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E") no-repeat center;
        background-size: 16px;
    }
    #userListCard .users-table td:nth-child(3)::before {
        content: '';
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") no-repeat center;
        background-size: 16px;
    }
    #userListCard .users-table td:nth-child(4)::before {
        content: '';
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center;
        background-size: 16px;
    }
    #userListCard .users-table td:nth-child(5)::before {
        content: '';
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat center;
        background-size: 16px;
    }
    #userListCard .users-table .btn-action {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Roles: card layout on mobile matching user cards */
    .role-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
        gap: 0 !important;
        position: relative;
    }
    .role-card-left {
        width: 100%;
        padding-bottom: 10px;
        border-bottom: 1px solid #f3f4f6;
        margin-bottom: 10px;
    }
    .role-card-icon {
        display: none !important;
    }
    .role-card-name {
        font-size: 15px !important;
    }
    .role-card-right {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .role-card-stats {
        display: flex;
        gap: 8px;
        width: 100%;
    }
    .role-stat {
        font-size: 12px !important;
    }
    .role-card .actions-cell {
        position: absolute;
        right: 14px;
        top: 14px;
        display: flex;
        gap: 2px;
    }
    .role-card .actions-cell .btn-action {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
    /* Roles header: same as users */
    #roleListCard .cards-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }
    #roleListCard .roles-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    #roleListCard .roles-header-title {
        font-size: 15px;
        line-height: 1;
        margin: 0;
    }
    #roleListCard .roles-header-desc {
        font-size: 12px;
        line-height: 1;
        margin-top: 4px;
    }
    #roleListCard .btn-add-card {
        width: auto;
        margin: 0;
    }
    .btn-add-card .btn-add-text {
        display: none;
    }
    .btn-add-card {
        width: 36px !important;
        height: 36px;
        padding: 0 !important;
        justify-content: center;
        min-height: 0 !important;
        border-radius: 8px;
    }

    .btn-add-card,
    #companyForm .btn-save,
    #passwordForm .btn-save {
        width: 50%;
        text-align: center;
        min-height: 36px;
        box-sizing: border-box;
        margin: 0 auto;
        display: block;
    }

    /* Phone prefix: compact */
    .phone-prefix {
        font-size: 13px;
        padding: 0 8px;
    }

    /* Prevent iOS auto-zoom on input focus (iOS zooms if font < 16px) */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}