/* =============================================================
   RESPONSIVE CSS — phones (≤480px) and mini-tablets (≤768px)
   ============================================================= */

/* Prevent horizontal scroll on the whole page */
body {
    overflow-x: hidden;
}

/* ---------------------------------------------------------------
   CAMPAIGN DETAILS HINT STRIP
   Always styled; visible whenever the layout stacks (≤1280px).
   Hidden on full-desktop where details sit beside the table.
   --------------------------------------------------------------- */
#campaign-details-hint {
    background: #e8f4fd;
    border: 1px solid #bee3f8;
    border-radius: 4px;
    padding: 0.6em 1em;
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #2b6cb0;
    text-align: center;
    display: none;
}

@media only screen and (max-width: 1280px) {
    #campaign-details-hint {
        display: block;
    }
}

/* ---------------------------------------------------------------
   CONTACTS PAGE — stack groups panel + contacts at medium screens
   --------------------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1280px) {
    #contact .stretched.row > .column,
    #premium .stretched.row > .column {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
}

/* ---------------------------------------------------------------
   SUBSCRIPTION SMS — channel list highlight + responsive layout
   --------------------------------------------------------------- */

/* Selected channel highlight (mirrors contacts group highlight) */
#premium .subs-channel-list .item.active {
    background-color: #dbeafe !important;
    border-left: 4px solid #2563eb !important;
    padding-left: 8px !important;
}
#premium .subs-channel-list .item.active .header {
    color: #1e3a8a !important;
    font-weight: 700 !important;
}
#premium .subs-channel-list .item.active .meta {
    color: #3b82f6 !important;
}

/* Channel list: cap height on mobile so it doesn't push content off screen */
#subscription-channels-panel .subs-channel-list {
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Toolbar: two action buttons side by side, stack on mobile */
.subs-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.subs-toolbar .ui.button {
    margin: 0 !important;
}

/* Tab menu: scrollable on small screens instead of wrapping awkwardly */
.subs-tab-menu {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}
.subs-tab-menu .item {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Tab section headers (Subscribers title+search, Reports title+back) */
.subs-tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.subs-tab-header .ui.input {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    .subs-tab-header .ui.input {
        width: auto;
    }
}

@media only screen and (max-width: 768px) {
    .subs-toolbar {
        gap: 5px;
    }
    .subs-toolbar .ui.button {
        flex: 1 1 calc(50% - 3px) !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ---------------------------------------------------------------
   GROUP / BULK SMS — stack table + Campaign Details vertically
   at medium screens (Nest Hub 1024px, small laptops ≤1280px).
   Side-by-side is too cramped at this width: the Actions column
   overflows into the details panel. Stacking gives the table the
   full width it needs and mirrors the mobile layout.
   --------------------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1280px) {
    #bulk-message .stretched.row > .column,
    #group-message .stretched.row > .column {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
}

/* ---------------------------------------------------------------
   CONTACTS PAGE — mobile / medium layout
   --------------------------------------------------------------- */

/* Groups list: capped so it doesn't push contacts off screen */
#groups-panel .content-lists {
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(34,36,38,.15);
    border-radius: .28571429rem;
}

/* Hint strip — only visible when layout stacks (≤1280px) */
.contacts-group-hint {
    display: none;
    background: #e8f4fd;
    border: 1px solid #bee3f8;
    border-radius: 4px;
    padding: 0.5em 0.8em;
    margin-bottom: 0.6em;
    font-size: 0.88em;
    color: #2b6cb0;
}

@media only screen and (max-width: 1280px) {
    .contacts-group-hint {
        display: block;
    }
}

/* Action buttons toolbar — wraps on mobile */
.contacts-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.contacts-toolbar .ui.input {
    flex: 1 1 180px;
    min-width: 140px;
}

.contacts-toolbar .ui.input input {
    width: 100% !important;
}

.contacts-toolbar button {
    flex: 0 0 auto;
    white-space: nowrap;
    margin: 0 !important;
}

@media only screen and (max-width: 768px) {
    /* Switch to a strict 2-column grid — grid cells enforce width regardless
       of button text length, which flex cannot reliably do with Semantic UI */
    .contacts-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    /* Search bar spans both columns */
    .contacts-toolbar .ui.icon.input {
        grid-column: 1 / -1;
        width: 100% !important;
    }

    .contacts-toolbar .ui.icon.input input {
        width: 100% !important;
    }

    /* Buttons fill their grid cell */
    .contacts-toolbar button.ui.button {
        width: 100% !important;
        margin: 0 !important;
        padding: 9px 6px !important;
        font-size: 0.8em !important;
        white-space: normal !important;
        word-break: break-word;
        text-align: center !important;
        line-height: 1.3 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }
}

/* ---------------------------------------------------------------
   CONTACTS — selected group highlight (all screen sizes)
   The li gets class="active" via v-bind:class in viewMore()
   --------------------------------------------------------------- */
.content-lists li.active > a {
    background-color: #dbeafe !important;
    border-left: 4px solid #2563eb !important;
    padding-left: 8px !important;
}

.content-lists li.active .title {
    color: #1e3a8a !important;
    font-weight: 700 !important;
}

.content-lists li.active .description-add {
    background: #bfdbfe !important;
    color: #1e40af !important;
}

/* ---------------------------------------------------------------
   TABLE ROW SELECTION HIGHLIGHT — global (all screen sizes)
   --------------------------------------------------------------- */

/* Campaign row selected in Group SMS / Bulk SMS table */
.t-messages-sent tbody tr.bulk-row-selected td {
    background-color: #ebf8ff !important;
    border-color: #bee3f8 !important;
    color: #1a365d !important;
}

/* Subtle left border accent so the highlight reads even on striped tables */
.t-messages-sent tbody tr.bulk-row-selected td:first-child {
    border-left: 3px solid #3182ce !important;
}

/* ---------------------------------------------------------------
   MOBILE SIDEBAR — off-canvas slide-in drawer
   --------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

    /* Override Semantic UI sidebar: fixed off-canvas, hidden by default */
    .ui.left.sidebar.sidemenu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 260px !important;
        height: 100% !important;
        transform: translateX(-260px) !important;
        transition: transform 0.25s ease !important;
        z-index: 1050 !important;
        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Cancel Semantic UI's own transform from .visible class */
        -webkit-transform: translateX(-260px) !important;
    }

    /* Open state — slides into view */
    .ui.left.sidebar.sidemenu.mobile-open {
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
    }

    /* Dark backdrop behind the open drawer */
    #mobile-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.55);
        z-index: 1040;
        cursor: pointer;
    }

    #mobile-sidebar-overlay.active {
        display: block;
    }

    /* Content area takes full width on mobile — no left margin */
    .navslide,
    .mainWrap.navslide,
    .mainWrap {
        margin-left: 0 !important;
    }

    /* Sticky navbar so it stays visible when scrolling */
    .navslide.navwrap {
        position: sticky;
        top: 0;
        z-index: 200;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Bigger hamburger tap target */
    .openbtn {
        min-width: 48px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Hide items that don't fit in the navbar on mobile */
    .navslide .right.menu .colhidden {
        display: none !important;
    }

    /* Truncate long page titles */
    .navslide .ui.menu .item h3 {
        font-size: 1.2em;
        max-width: 160px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Prevent Semantic UI's .visible sidebar transform from shifting the pusher */
    .pusher {
        transform: none !important;
        -webkit-transform: none !important;
    }
}

/* ---------------------------------------------------------------
   KPI CARDS — stack to single column on phones
   --------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

    /* Three-column KPI grid → single column */
    .ui.three.column.stackable.grid > .column,
    .ui.three.column.stackable.grid > .row > .column {
        width: 100% !important;
        margin-bottom: 1em;
    }

    /* Two-column grids → single column */
    .ui.two.column.stackable.grid > .column,
    .ui.two.column.stackable.grid > .row > .column {
        width: 100% !important;
        margin-bottom: 1em;
    }

    /* Inner equal-width grids inside cards — let them wrap */
    .ui.equal.width.grid > .column {
        min-width: 45% !important;
        flex: 1 1 45% !important;
    }

    /* Chart containers — tall enough for Highcharts combination charts
       (column bars + pie overlay + title + legend + axis labels) */
    .height-lg,
    [class*="height-lg"] {
        height: 320px !important;
        min-height: 320px !important;
    }

    /* Segments inside padded grids need inner padding trim */
    .ui.relaxed.padded.stackable.grid {
        padding-left: 0.5em !important;
        padding-right: 0.5em !important;
    }
}

/* ---------------------------------------------------------------
   DATA TABLES — horizontal scroll wrapper
   --------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

    /* Vuetable wrapper scrolls horizontally; table keeps its natural
       display:table so column widths and borders stay correct */
    .vuetable-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    /* Keep the table at full natural width inside the scroll wrapper */
    .vuetable-wrapper .vuetable {
        min-width: 600px;
        white-space: nowrap;
    }

    /* Fallback for plain .ui.table not inside a vuetable-wrapper */
    .ui.table:not(.vuetable) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* DataTable wrapper — allow horizontal scroll */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- SMS Sent page toolbar (search + date picker + download) ---- */
    /* Stack the inline toolbar controls vertically on mobile */
    .ui.segment.fullheight > .ui.icon.input,
    .ui.segment.fullheight > button {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.5em !important;
        box-sizing: border-box !important;
    }

    .ui.segment.fullheight > .ui.icon.input input {
        width: 100% !important;
    }

    .ui.segment.fullheight > .ui.divider {
        margin-top: 0.5em !important;
    }

    /* ---- Group/Bulk SMS toolbar (search + date picker + download) ---- */
    .bulk-toolbar > .ui.icon.input,
    .bulk-toolbar > button {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.5em !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .bulk-toolbar > .ui.icon.input input {
        width: 100% !important;
    }

    /* Ensure fixed-width and single-line tables also scroll horizontally */
    table.ui.fixed.table,
    table.ui.single.line.table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        width: 100% !important;
    }

    /* Pagination controls — bigger tap targets */
    .dataTables_paginate .paginate_button,
    .ui.pagination.menu .item {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0.7em 0.9em !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Table filter/search — full width */
    .dataTables_filter input {
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box;
    }

    .dataTables_wrapper .dataTables_filter {
        display: block;
        text-align: left !important;
        margin-bottom: 0.5em;
    }

    .dataTables_length {
        margin-bottom: 0.5em;
    }
}

/* ---------------------------------------------------------------
   FORMS — stack fields vertically
   --------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

    /* Multi-column form fields stack to single column */
    .ui.form .fields {
        flex-direction: column !important;
        display: flex !important;
    }

    .ui.form .fields > .field {
        width: 100% !important;
        margin-bottom: 0.8em !important;
    }

    .ui.form .field {
        width: 100% !important;
    }

    /* Inputs and selects full width */
    .ui.form input,
    .ui.form select,
    .ui.form textarea,
    .ui.form .ui.input,
    .ui.form .ui.dropdown {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Button groups stack */
    .ui.buttons {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    .ui.buttons .button {
        flex: 1 1 auto;
        margin: 0 !important;
        margin-bottom: 4px !important;
    }

    /* Standalone action buttons */
    .ui.button {
        margin-bottom: 6px;
    }

    /* ---- Scheduling section: horizontal segments → vertical stack ----
       Semantic UI's .ui.horizontal.segments lays panels side-by-side with
       a shared border. On mobile we flip to column so each field (Days,
       Start, End, Time) gets its own full-width row.                    */
    .ui.horizontal.segments {
        flex-direction: column !important;
    }

    .ui.horizontal.segments > .segment {
        width: 100% !important;
        min-width: 0 !important;
        border: 1px solid rgba(34, 36, 38, .15) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0.8em !important;
    }

    /* Collapse the doubled border between stacked segments */
    .ui.horizontal.segments > .segment + .segment {
        border-top: none !important;
    }

    /* Round the outer corners of first and last panel */
    .ui.horizontal.segments > .segment:first-child {
        border-radius: .28571429rem .28571429rem 0 0 !important;
    }

    .ui.horizontal.segments > .segment:last-child {
        border-radius: 0 0 .28571429rem .28571429rem !important;
    }

    /* All inputs/selects inside scheduling segments fill full width */
    .ui.horizontal.segments .ui.input,
    .ui.horizontal.segments .ui.input input,
    .ui.horizontal.segments input[type="date"],
    .ui.horizontal.segments input[type="time"],
    .ui.horizontal.segments select {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Multi-select (days of week, dates of month) gets enough height to show options */
    .ui.horizontal.segments select[multiple] {
        min-height: 100px !important;
    }
}

/* ---------------------------------------------------------------
   MODALS — full-width, scrollable on mobile
   --------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

    .ui.modal {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        top: 4% !important;
        left: 2.5% !important;
        right: 2.5% !important;
        margin: 0 !important;
    }

    .ui.modal > .content {
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ui.modal > .header {
        font-size: 1.2em !important;
    }

    /* Top-up modal steps list */
    .ui.secondary.segment ul {
        padding-left: 1.2em;
    }
}

/* ---------------------------------------------------------------
   SEARCH INPUTS — reliable click/tap across all pages
   The icon inside .ui.icon.input is position:absolute and can be
   hard to tap on touch screens. Enlarge its hit area and ensure
   only ONE icon exists in the DOM at a time (use v-if/v-else in
   templates, never v-show with two stacked icons).
   --------------------------------------------------------------- */
.ui.icon.input > i.link.icon {
    pointer-events: auto !important;
    cursor: pointer !important;
    min-width: 2.8em;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 768px) {
    /* Taller input + wider icon tap zone on touch devices */
    .ui.icon.input > input {
        min-height: 42px !important;
    }

    .ui.icon.input > i.link.icon {
        min-width: 44px !important;
        font-size: 1.1em;
    }
}

/* ---------------------------------------------------------------
   TOUCH TARGETS — all interactive elements ≥ 44px
   --------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

    .ui.menu .item,
    .ui.menu a.item {
        min-height: 44px;
        display: flex !important;
        align-items: center;
    }

    .ui.button,
    .ui.buttons .button,
    .ui.dropdown {
        min-height: 40px;
    }

    /* Sidebar menu items */
    .sidemenu .item,
    .sidemenu .title.item,
    .sidemenu .content .item {
        min-height: 44px;
        padding: 0.85em 1em !important;
        display: flex !important;
        align-items: center;
    }
}

/* ---------------------------------------------------------------
   DROPDOWNS — mobile-friendly for all Semantic UI dropdowns
   --------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

    /* ---- Contact List / Sender ID dropdown button ---- */
    .ui.fluid.dropdown.labeled.icon.button {
        min-height: 48px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        /* Preserve Semantic UI's left padding that clears the absolutely-
           positioned icon (~2.57em wide). Changing this causes text to
           render on top of the icon on small screens. */
        padding-top: 0.85em !important;
        padding-right: 1em !important;
        padding-bottom: 0.85em !important;
        /* padding-left is intentionally NOT overridden — Semantic UI sets
           4.07em here to offset the text past the icon */
    }

    /* Ensure the selected text inside the button wraps instead of overflowing */
    .ui.fluid.dropdown.labeled.icon.button > .text {
        white-space: normal !important;
        word-break: break-word !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: calc(100% - 3em) !important;
    }

    /* Dropdown menu — full width, capped height, scrollable */
    .ui.fluid.dropdown .menu,
    .ui.dropdown .menu {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 260px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 1100 !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
        border-radius: 0 0 4px 4px !important;
    }

    /* Items inside any dropdown */
    .ui.dropdown .menu > .item {
        padding: 0.9em 1.1em !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        font-size: 1em !important;
        line-height: 1.3 !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    }

    .ui.dropdown .menu > .item:last-child {
        border-bottom: none !important;
    }

    /* Search input inside the Contact List dropdown */
    .ui.dropdown .menu .ui.left.icon.input {
        width: 100% !important;
        padding: 0.4em 0.6em !important;
        box-sizing: border-box !important;
    }

    .ui.dropdown .menu .ui.left.icon.input input {
        width: 100% !important;
        padding: 0.8em 0.8em 0.8em 2.4em !important;
        font-size: 1em !important;
        box-sizing: border-box !important;
    }

    /* Dropdown header label ("Search Groups") */
    .ui.dropdown .menu > .header {
        padding: 0.7em 1em !important;
        font-size: 0.85em !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        color: rgba(0,0,0,0.5) !important;
    }

    /* Scrolling sub-menu (the contacts list) */
    .ui.dropdown .menu .scrolling.menu {
        max-height: 160px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-top: 1px solid rgba(0,0,0,0.08) !important;
    }

    /* Navbar user dropdown — right-align on mobile */
    .ui.menu .ui.dropdown .menu {
        right: 0 !important;
        left: auto !important;
    }

    /* Sender ID and schedule selects */
    .ui.form select.ui.dropdown,
    .ui.fluid.dropdown:not(.labeled):not(.icon):not(.button) {
        min-height: 44px !important;
        padding: 0.7em 1em !important;
    }

    /* Select-converted dropdowns — show selected text clearly */
    .ui.selection.dropdown {
        min-height: 44px !important;
        padding: 0.8em 2.5em 0.8em 1em !important;
        line-height: 1.4 !important;
    }

    .ui.selection.dropdown > .text {
        line-height: 1.4 !important;
    }
}

/* ---------------------------------------------------------------
   SEND SMS — tabular tab menu
   --------------------------------------------------------------- */

/* Tablet: shrink tabs to fit on one row */
@media only screen and (max-width: 768px) {

    .ui.top.attached.tabular.menu {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
    }

    .ui.top.attached.tabular.menu .item {
        flex: 1 1 auto !important;
        text-align: center !important;
        justify-content: center !important;
        font-size: 0.85em !important;
        padding: 0.75em 0.4em !important;
        white-space: nowrap !important;
    }

    /* Phone number input — full width */
    .ui.fluid.left.labeled.right.action.input {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .ui.fluid.left.labeled.right.action.input input {
        width: 100% !important;
        flex: 1 1 auto !important;
    }

    /* Textarea inside .ui.grid — full width */
    .ui.segment .ui.grid textarea,
    .form-textarea {
        width: 100% !important;
        min-height: 100px !important;
        box-sizing: border-box !important;
        resize: vertical;
    }

    /* Campaign name / bare inputs inside .ui.grid */
    .ui.grid > input[type="text"],
    .ui.grid > input[type="number"] {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.6em 0.8em !important;
        border: 1px solid rgba(34, 36, 38, 0.15) !important;
        border-radius: 0.28em !important;
    }

    /* Submit / Cancel buttons — full width but let v-show keep display:none */
    .ui.button.savvy,
    #cancel-bulk,
    #send-bulk {
        width: 100% !important;
        margin-bottom: 8px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
}

/* Phone: stack the tabs vertically so labels stay readable */
@media only screen and (max-width: 480px) {

    .ui.top.attached.tabular.menu {
        flex-direction: column !important;
        border-bottom: 1px solid rgba(34, 36, 38, 0.15) !important;
    }

    .ui.top.attached.tabular.menu .item {
        width: 100% !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        border-left: 4px solid transparent !important;
        border-bottom: 1px solid rgba(34, 36, 38, 0.12) !important;
        font-size: 0.95em !important;
        padding: 0.85em 1em !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }

    .ui.top.attached.tabular.menu .active.item {
        border-left: 4px solid #4183c4 !important;
        background: rgba(65, 131, 196, 0.06) !important;
        border-bottom-color: transparent !important;
    }

    /* Tab content panels: remove side padding that bleeds off-screen */
    .ui.tab.full-width.padding-md {
        padding: 0.6em 0.5em !important;
    }

    /* Dropzone touch-friendly */
    #file-upload .dropzone {
        min-height: 100px !important;
        padding: 1em !important;
    }
}

/* ---------------------------------------------------------------
   PHONE-ONLY overrides (≤480px)
   --------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

    /* Base font slightly larger for readability */
    html {
        font-size: 13px !important;
    }

    /* KPI inner stat columns — wrap to 2 per row */
    .ui.equal.width.row > .column {
        min-width: 48% !important;
        flex: 1 1 48% !important;
    }

    /* Navbar page title shorter */
    .navslide .ui.menu .item h3 {
        max-width: 110px;
    }

    /* Chart containers on phone */
    .height-lg {
        height: 280px !important;
        min-height: 280px !important;
    }

    /* Modal full-screen on phone */
    .ui.modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 96vh !important;
        top: 2% !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }

    /* Remove unnecessary padded page edges */
    .ui.padded.segment,
    .ui.relaxed.padded.stackable.grid {
        padding-left: 0.25em !important;
        padding-right: 0.25em !important;
    }

    /* Segment header text */
    .ui.segment h3,
    .ui.segment h4 {
        font-size: 1em !important;
    }
}

/* ---------------------------------------------------------------
   CREATE CONTACT MODAL — responsive quick-add form + upload tab
   --------------------------------------------------------------- */

/* Instructions block in Upload tab */
.upload-instructions {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 14px 16px;
    margin-top: 12px;
}
.upload-instructions h4 {
    margin: 0 0 6px;
    color: #333;
    font-size: 0.95em;
}
.upload-instructions p {
    margin: 0 0 12px;
    font-size: 0.88em;
    color: #555;
    line-height: 1.5;
}
.upload-instructions .ui.button {
    width: 100%;
    justify-content: center;
}

@media only screen and (max-width: 767px) {
    /* Quick contact row: wrap into a 2-column grid */
    #create-contact-list .quick-contact-row {
        flex-wrap: wrap !important;
        gap: 4px;
        padding: 8px 0 !important;
        border-bottom: 1px dashed rgba(34,36,38,.12);
        margin-bottom: 4px !important;
    }

    /* Row number — full-width tiny label above the row */
    #create-contact-list .quick-contact-row > .one.wide.field:first-child {
        width: 100% !important;
        flex: 0 0 100% !important;
        font-size: 0.78em;
        color: #888;
        margin-bottom: 2px !important;
    }

    /* Country + phone (and other name) side by side at 50% each.
       First name also at 50% so it pairs with other name on one line. */
    #create-contact-list .quick-contact-row > .four.wide.field,
    #create-contact-list .quick-contact-row > .three.wide.field {
        width: calc(50% - 2px) !important;
        flex: 0 0 calc(50% - 2px) !important;
        margin: 0 !important;
    }

    /* +more / Remove button — full width, right-aligned */
    #create-contact-list .quick-contact-row > .one.wide.field:last-child {
        width: 100% !important;
        flex: 0 0 100% !important;
        text-align: right;
        margin-top: 4px !important;
    }

    /* Modal scrolling content: leave room for action bar */
    #create-contact-list.ui.modal > .scrolling.content {
        max-height: calc(100vh - 160px) !important;
        overflow-y: auto !important;
        padding: 1em !important;
    }

    /* Tab menu inside modal: horizontal scroll instead of wrapping */
    #create-contact-list .ui.tabular.menu {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }
    #create-contact-list .ui.tabular.menu .item {
        flex-shrink: 0 !important;
    }
}

/* ---------------------------------------------------------------
   USER ROLES PAGE — roles panel + content panel responsive
   --------------------------------------------------------------- */

/* Stack columns at medium screens (Nest Hub / tablets) */
@media only screen and (min-width: 992px) and (max-width: 1280px) {
    #user .stretched.row > .column {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
}

/* Roles panel: cap list height on mobile */
#roles-panel .content-lists {
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Role action buttons — wrap into a grid on mobile */
.role-actions-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}
.role-actions-toolbar .ui.button {
    margin: 0 !important;
}

@media only screen and (max-width: 768px) {
    .role-actions-toolbar .ui.button {
        flex: 1 1 calc(50% - 4px) !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Permissions table — horizontal scroll on mobile */
.role-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
.role-table-scroll table {
    min-width: 420px;
}

/* ---------------------------------------------------------------
   CREATE CLIENT PAGE — form fields responsive
   --------------------------------------------------------------- */

/* Stack all .fields.stackable to single column on mobile */
@media only screen and (max-width: 767px) {
    .ui.form .fields.stackable {
        flex-direction: column !important;
    }
    .ui.form .fields.stackable > .field {
        width: 100% !important;
        margin-bottom: 0.6em !important;
    }

    /* Ensure labeled inputs stretch full width when stacked */
    .ui.form .fields.stackable .ui.labeled.input,
    .ui.form .fields.stackable .ui.fluid.labeled.input {
        width: 100% !important;
        display: flex !important;
    }
    .ui.form .fields.stackable .ui.labeled.input > input {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* Create Client submit button — full width on mobile */
    .ui.form.segment .ui.button,
    form.ui.form.segment .ui.button {
        width: 100% !important;
        margin-top: 0.8em !important;
    }
}