/* ====================================================================
   responsive.css — Alchemis Elixir 3.0
   Responsive breakpoints for top operational screens.
   Do NOT add non-responsive base styles here.
   Breakpoints: 1199 | 1099 | 899 | 699 | 479
   ==================================================================== */

/* ── Shared utilities ── */
.alc-hscroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* ====================================================================
   GLOBAL SHELL — header, tabs, content (all authenticated pages)
   ==================================================================== */

@media (max-width: 1099px) {
    #alc-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 10px 14px !important;
    }
    .alc-header-profile {
        width: 100%;
        justify-content: flex-start;
    }
    .alc-header-controls {
        flex-wrap: wrap;
        width: 100%;
        gap: 8px !important;
    }
    .alc-header-stats {
        flex-wrap: wrap;
        width: 100%;
    }
    .alc-header-actions {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start !important;
    }
    .alc-filter-val {
        max-width: 100% !important;
    }

    /* Main nav tabs — horizontal scroll on tablet */
    #alc-tabs {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    #alc-tabs .tab-spacer,
    #alc-tabs .tab-fill { display: none !important; }
    .alc-tab {
        flex: 0 0 auto !important;
    }
    .alc-tab a {
        white-space: nowrap !important;
    }
}

@media (max-width: 699px) {
    #alc-content-box { padding: 6px; }

    #alc-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding: 0 8px !important;
        scroll-snap-type: x proximity;
    }
    #alc-tabs::-webkit-scrollbar { display: none; }
    .alc-tab {
        flex: 0 0 auto !important;
        min-width: max-content;
        scroll-snap-align: start;
    }
    .alc-tab a {
        padding: 0 12px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }

    #btn-cache-refresh,
    .alc-header-actions .alc-logout-form button {
        min-height: 36px;
    }
}

@media (max-width: 479px) {
    body { padding: 2px; }
    #alc-content-box { padding: 4px; }

    .alc-stat-badge {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
    }
    .alc-control-divider { display: none; }
}

/* ====================================================================
   DASHBOARD
   ==================================================================== */

@media (min-width: 1400px) {
    #alc-content-box { padding: 14px 20px; }
    .dash-grid { gap: 16px; }
    .dash-col1 { width: 38%; }
    .dash-col2 { width: 36%; }
}

@media (max-width: 1099px) {
    .dash-grid {
        flex-wrap: wrap;
        gap: 10px;
        height: auto !important;
        min-height: 0 !important;
    }
    .dash-col1,
    .dash-col2 {
        width: 48%;
        overflow-y: visible !important;
        max-height: none !important;
    }
    .dash-col3 {
        width: 100%;
        flex: none;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .dash-col3 > .dash-section,
    .dash-col3 > .zone-row { flex: 1; min-width: 260px; }
    .dash-col3 > .zone-row { width: 100%; }

    .cal-summary {
        flex-wrap: wrap;
        gap: 6px 10px;
        justify-content: center;
    }
}

@media (max-width: 899px) {
    .dash-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    .dash-topbar-left {
        flex-wrap: wrap;
        width: 100%;
    }
    .dash-topbar-left select,
    #dash-goto,
    #nbm-select {
        width: 100% !important;
        max-width: 100% !important;
    }
    #div-nbm {
        display: flex !important;
        flex-wrap: wrap;
        width: 100%;
        margin-left: 0 !important;
        margin-top: 6px;
    }
    .dash-print-link {
        align-self: flex-start;
    }

    .dash-col1,
    .dash-col2 { width: 50%; }

    .client-cal-row { flex-wrap: wrap; }
    .client-col,
    .cal-col { width: 100%; }

    .zone-row { flex-wrap: wrap; }
    .zone-panel { min-width: calc(50% - 4px); }

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

@media (max-width: 699px) {
    .dash-grid {
        flex-direction: column;
        gap: 0;
    }
    .dash-col1,
    .dash-col2,
    .dash-col3 { width: 100%; }

    .dash-info-bar { flex-direction: column; }
    .dash-info-item {
        border-right: 0;
        border-bottom: 1px solid #c8d0dc;
    }
    .dash-info-item:last-child { border-bottom: 0; }

    .dash-info-panel {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dash-info-table {
        min-width: 420px;
    }

    .client-cal-row { flex-direction: column; }
    .client-col,
    .cal-col { width: 100%; }

    .zone-row { flex-direction: column; }
    .zone-panel { width: 100%; min-width: 0; }

    .tls-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .rec-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
}

@media (max-width: 479px) {
    .dash-section > h3 {
        font-size: 9px;
        padding: 4px 8px;
    }
    .ds-body { padding: 6px 8px; }

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

    .prog-label { width: 80px; font-size: 7.5pt; }
    .prog-nums  { width: 56px; font-size: 7.5pt; }

    #alc-header-left,
    #alc-header-right { float: none; overflow: hidden; }
    #alc-header-right span { float: left; }
}

/* ====================================================================
   FILTERS
   ==================================================================== */

@media (max-width: 1199px) {
    .flt-layout {
        flex-direction: column !important;
        gap: 20px !important;
        min-height: 0 !important;
    }
    .flt-left {
        width: 100% !important;
        flex-shrink: 1 !important;
        padding-right: 0 !important;
    }
    .flt-right {
        width: 100% !important;
        border-left: none !important;
        padding-left: 0 !important;
        min-height: 420px;
    }
    #flt-builder-ifr {
        height: min(72vh, 740px) !important;
        min-height: 360px;
    }
}

@media (max-width: 899px) {
    .flt-header-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .flt-header-wrapper > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .flt-header-wrapper h2 {
        font-size: 18px !important;
        flex-wrap: wrap;
    }
    .flt-btn-delete-selected,
    .flt-header-wrapper a[data-flt-create] {
        flex: 1 1 auto;
        justify-content: center;
    }

    details summary {
        padding: 14px 16px !important;
        font-size: 14px !important;
    }

    .flt-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table.flt-list-table {
        min-width: 560px;
    }

    .flt-list-table .flt-actions {
        flex-wrap: wrap;
        gap: 4px;
    }
}

@media (max-width: 699px) {
    #flt-empty-state {
        padding: 24px 16px !important;
        text-align: center;
    }
    #flt-empty-state h3 {
        font-size: 16px !important;
    }
    #flt-empty-state p {
        font-size: 13px !important;
    }

}

@media (max-width: 479px) {
    table.flt-list-table {
        min-width: 480px;
        font-size: 12px !important;
    }
    table.flt-list-table thead th,
    table.flt-list-table tbody tr td {
        padding: 8px 10px !important;
    }
}

/* ====================================================================
   WORKSPACE (company + post)
   ==================================================================== */

/* Desktop: page may scroll; each panel also has its own scroller (PHP live) */
@media (min-width: 1200px) {
    body.alc-app:has(.ws-row-container) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        max-height: none !important;
    }
    body.alc-app:has(.ws-row-container) .ws-row-container {
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
    }
    body.alc-app:has(.ws-row-container) .ws-left-panel {
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
    }
    body.alc-app:has(.ws-post-grid) .ws-details-panel {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
    body.alc-app:has(.ws-row-container) .ws-middle-panel {
        height: calc(100vh - 145px) !important;
        max-height: calc(100vh - 145px) !important;
        overflow: hidden !important;
        flex: 1 1 0 !important;
        min-width: 280px !important;
    }
    body.alc-app:has(.ws-row-container) .ws-middle-panel > div {
        height: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    body.alc-app:has(.ws-row-container) .notes-list {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
    body.alc-app:has(.ws-row-container) .ws-right-panel {
        height: calc(100vh - 145px) !important;
        max-height: calc(100vh - 145px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 28% !important;
        max-width: 420px !important;
        min-width: 260px !important;
    }
    body.alc-app:has(.ws-row-container) .ws-right-info-wrap {
        height: calc(100vh - 160px) !important;
        max-height: calc(100vh - 160px) !important;
        overflow: hidden !important;
    }
    body.alc-app:has(.ws-row-container) iframe#ifr_info {
        width: 100% !important;
        height: calc(100vh - 185px) !important;
        min-height: 300px !important;
    }
    body.alc-app:has(.ws-row-container) .ws-bottom-table-wrapper {
        min-height: 0 !important;
        max-height: none !important;
        width: 100% !important;
        margin-top: 8px !important;
        border-radius: 0 !important;
    }
    body.alc-app:has(.ws-row-container) #ws-contacts-table-body {
        min-height: 0 !important;
        max-height: 260px !important;
    }
    body.alc-app:has(.ws-row-container) .ws-details-panel > div .ws-card-body {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
    }
    body.alc-app:has(.ws-row-container) .ws-initiatives-panel > div .ws-card-body {
        overflow-y: auto !important;
    }
}

@media (max-width: 1199px) {
    body:has(.ws-row-container) {
        overflow: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh;
    }

    .ws-row-container {
        flex-direction: column;
        align-items: stretch;
    }

    .ws-left-panel,
    .ws-middle-panel,
    .ws-right-panel {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0;
    }

    .ws-right-info-wrap {
        min-height: 200px !important;
    }

    .ws-right-info-wrap iframe#ifr_info {
        min-height: 200px !important;
        height: auto !important;
    }

    .ws-left-subrow {
        flex-direction: column;
    }

    .ws-details-panel,
    .ws-initiatives-panel {
        min-width: 0 !important;
        width: 100% !important;
    }

    .notes-list {
        height: auto !important;
        min-height: 280px;
        max-height: 50vh;
        overflow-y: auto !important;
    }

    iframe#ifr_info {
        min-height: 360px;
        height: 50vh !important;
    }
}

@media (max-width: 899px) {
    .ws-menu-bar {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: 38px;
        gap: 8px !important;
    }
    .ws-menu-bar span {
        flex-wrap: wrap !important;
    }
    .ws-menu-bar select {
        max-width: 100% !important;
        flex: 1 1 120px;
    }

    .ws-bottom-table-wrapper {
        padding: 10px;
    }
    .ws-bottom-table-wrapper table {
        min-width: 520px;
    }

    .note-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 699px) {
    .ws-middle-panel {
        min-width: 0 !important;
        width: 100% !important;
    }

    table.ianlist th,
    table.ianlist td {
        display: block;
        width: 100% !important;
        padding: 4px 0 !important;
    }
    table.ianlist tr {
        display: block;
        padding: 8px 0;
        border-bottom: 1px solid #f1f5f9;
    }
    table.ianlist tr:last-child {
        border-bottom: none;
    }

    .ws-card-body {
        padding: 10px 12px;
    }
}

/* ====================================================================
   COMMUNICATIONS
   ==================================================================== */

@media (max-width: 899px) {
    .comm-index-page.premium-crm-container,
    .premium-crm-container.comm-index-page {
        max-width: 100% !important;
        padding: 10px 4px 24px !important;
    }
    .comm-index-header {
        flex-direction: column;
        align-items: stretch !important;
    }
    .comm-index-header .btn-primary-premium {
        width: 100%;
        justify-content: center;
        min-height: 40px;
    }
    .comm-today-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 14px 16px !important;
    }

    .premium-crm-container {
        max-width: 100% !important;
        padding: 10px 4px 24px !important;
    }
    .premium-crm-top-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .premium-crm-title {
        font-size: 17px !important;
    }
    .btn-primary-premium {
        width: 100%;
        justify-content: center;
        min-height: 40px;
    }

    .premium-form-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 14px 16px !important;
    }

    .premium-form-panel > div {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .comm-today-table,
    .premium-table {
        min-width: 720px;
    }
}

@media (max-width: 699px) {
    .comm-today-table th,
    .comm-today-table td,
    .premium-table th,
    .premium-table td {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }

    /* Hide less critical columns on phones — table scrolls if needed */
    .comm-today-table th:nth-child(5),
    .comm-today-table td:nth-child(5),
    .comm-today-table th:nth-child(6),
    .comm-today-table td:nth-child(6),
    .premium-table th:nth-child(5),
    .premium-table td:nth-child(5),
    .premium-table th:nth-child(6),
    .premium-table td:nth-child(6) {
        display: none;
    }
    .comm-today-table,
    .premium-table {
        min-width: 520px;
    }
}

@media (max-width: 479px) {
    .comm-today-table th:nth-child(4),
    .comm-today-table td:nth-child(4),
    .premium-table th:nth-child(4),
    .premium-table td:nth-child(4) {
        display: none;
    }
    .comm-today-table,
    .premium-table {
        min-width: 420px;
    }
}

/* ====================================================================
   SEARCH
   ==================================================================== */

@media (max-width: 1199px) {
    .search-layout {
        flex-direction: column-reverse !important;
        gap: 12px !important;
    }
    .search-params-pane {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        height: auto !important;
        align-self: stretch !important;
    }
    .search-results-pane {
        width: 100% !important;
        min-height: 320px;
        padding: 12px !important;
    }
    #ifr_search {
        height: min(58vh, 640px) !important;
        min-height: 280px !important;
    }
}

@media (max-width: 899px) {
    .cfg-header {
        font-size: 15px !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .panel-title {
        padding: 10px 14px !important;
    }
    .panel-body {
        padding: 12px 14px !important;
    }
    .search-input-group input.enter-search,
    .search-input-group select {
        height: 40px !important;
        font-size: 13px !important;
    }
    .search-input-group .search-btn-premium {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 699px) {
    .search-results-pane {
        padding: 8px !important;
    }
    #ifr_search {
        height: min(50vh, 520px) !important;
        min-height: 240px !important;
        border-radius: 6px !important;
    }
    .search-params-pane {
        padding: 12px !important;
        border-radius: 10px;
    }
}

@media (max-width: 479px) {
    .search-form-label {
        font-size: 10px !important;
    }
    #ifr_search {
        min-height: 220px !important;
    }
}

/* ====================================================================
   GLOBAL — mobile & tablet (all pages using alc-app / guest login)
   ==================================================================== */

.dash-grid-viewport {
    height: calc(100vh - 110px);
    align-items: stretch;
}

@media (max-width: 1199px) {
    .dash-grid-viewport {
        height: auto !important;
        align-items: flex-start !important;
    }

    body.alc-app {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100vh;
        -webkit-overflow-scrolling: touch;
    }

    #alc-content-box iframe,
    iframe[id^="ifr_"],
    iframe[name^="ifr_"] {
        max-width: 100%;
    }

    .alc-split {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .alc-split-left,
    .alc-split-right {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 280px;
        overflow: visible !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .row > [class*="col-"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .premium-form-body {
        padding: 16px !important;
    }
    .premium-form-footer {
        flex-wrap: wrap;
    }

    /* display:block enables horizontal scroll on narrow viewports, but it
       destroys column alignment on the wide Monthly Planner matrix. */
    table.adminlist:not(#tbl_planner_statistics),
    table.cal-table,
    table.cal-grid-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    #tbl_planner_statistics.adminlist {
        display: table !important;
        width: max-content !important;
        max-width: none !important;
    }

    .admin-hub > div[style*="display:flex"] {
        flex-direction: column !important;
    }
}

@media (max-width: 899px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea {
        max-width: 100%;
    }

    .alc-ini-sdd-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }
    .dash-section > h3 .alc-ini-sdd-wrap {
        width: auto !important;
        max-width: 58% !important;
    }
    .dash-section > h3 .alc-ini-sdd-trigger {
        max-width: 165px !important;
    }
    #div_client_id,
    #div_nbm_id,
    #div-nbm {
        width: 100% !important;
    }
    #client_sel,
    #nbm_sel,
    #cal-goto,
    #dash-goto {
        width: 100% !important;
        max-width: 100% !important;
    }

    .cal-filter-segmented {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        width: 100%;
    }
    .cal-filter-link {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        font-size: 11px !important;
        padding: 6px 8px !important;
    }

    .meeting-summary-bar {
        flex-wrap: wrap !important;
        gap: 6px 10px !important;
    }

    .list-split-container {
        flex-direction: column !important;
    }
    .list-premium-table {
        min-width: 640px;
    }

    .btn-primary-premium,
    .btn-secondary-premium,
    .alc-btn-premium {
        min-height: 40px;
    }

    .mailers-layout,
    .mailer-recipients-layout {
        flex-direction: column !important;
    }
}

@media (max-width: 699px) {
    h1 { font-size: 18px !important; }
    h2 { font-size: 15px !important; }

    .dash-col1[style*="overflow-y"] {
        overflow-y: visible !important;
        max-height: none !important;
    }

    .cal-left-col,
    .cal-right-col {
        padding: 12px !important;
    }
    .cal-grid-table {
        min-width: 520px;
    }

    .premium-crm-container[style] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .ws-bottom-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #flt-builder-ifr,
    iframe#ifr_info,
    #ifr_search {
        width: 100% !important;
    }

    .sel-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .sel-bar button {
        min-height: 36px;
    }
}

/* Touch devices — comfortable tap targets */
@media (hover: none) and (pointer: coarse) {
    button,
    input[type="submit"],
    input[type="button"],
    .btn,
    .btn-primary-premium,
    .alc-tab a,
    .search-btn-premium,
    .ws-menu-bar a {
        min-height: 40px;
        min-width: 40px;
    }
    .alc-tab a {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}

/* ====================================================================
   LOGIN (guest layout — mobile & tablet)
   ==================================================================== */

@media (max-width: 899px) {
    .login-wrapper {
        margin-top: 24px !important;
        padding: 0 12px 24px !important;
    }
    .login-card {
        flex-direction: column !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 480px !important;
        border-radius: 20px !important;
    }
    .login-card-hero {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 200px !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 16px !important;
    }
    .login-card-hero > div:first-child {
        border-radius: 20px 20px 0 0 !important;
    }
    .login-card-form {
        padding: 28px 24px 32px !important;
        border-radius: 0 0 20px 20px !important;
    }
    .site-footer {
        padding: 0 12px 16px;
        line-height: 1.5;
    }
}

@media (max-width: 479px) {
    .login-wrapper {
        margin-top: 12px !important;
    }
    .login-card {
        border-radius: 16px !important;
    }
    .login-card-hero {
        min-height: 160px !important;
    }
    .login-card-form {
        padding: 24px 18px 28px !important;
    }
    .login-card-form h1 {
        font-size: 20px !important;
    }
}

/* Login hero base (desktop) */
.login-card-hero {
    background-size: cover;
    background-position: center;
    width: 410px;
    min-width: 410px;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    box-sizing: border-box;
}
.login-card-form {
    flex: 1;
    box-sizing: border-box;
    background: #ffffff;
    padding: 48px 48px 44px;
    color: #0f172a;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}