/* Shared phone-first adjustments across HTFL system pages. */
@import url("/static/css/htfl-pull-refresh.css?v=7");

@media (max-width: 768px) {
    /*
     * 系統頁首手機標準：操作列先固定成 compact row，再顯示標題與權限橫幅。
     * description 在手機隱藏，避免長短不一令頁首高度跳動。
     * 使用 !important 以覆蓋各頁面內嵌 <style>（其載入順序在 htfl-mobile 之後）。
     */
    html body .container .header,
    html body .container > header.header {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        text-align: left !important;
        position: relative !important;
    }

    html body .container .header > h1,
    html body .container > header.header > h1 {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        margin: 8px 0 4px 0 !important;
        padding-right: 0 !important;
        font-size: clamp(1.2rem, 5.2vw, 1.55rem) !important;
        line-height: 1.16 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .container .header > p,
    html body .container > header.header > p {
        display: none !important;
    }

    html body .container .header > .htfl-access-banner,
    html body .container > header.header > .htfl-access-banner {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    html body .container .header,
    html body .container > header.header,
    html body > .header {
        overflow: visible !important;
        z-index: 20 !important;
    }

    html body .container:has(.htfl-notifications-dropdown.show),
    html body .container:has(.user-menu-dropdown.show),
    html body .container:has(.htfl-notifications-btn.active) {
        overflow: visible !important;
    }

    html body .container .header > .header-actions,
    html body .container > header.header > .header-actions {
        order: 1 !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        justify-content: flex-end !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(3px, 1.35vw, 6px) !important;
        overflow: visible !important;
        z-index: 21 !important;
    }

    html body .container .header > .header-actions > *,
    html body .container > header.header > .header-actions > * {
        flex-shrink: 0 !important;
    }

    /*
     * 通知下拉：相對整列 .header-actions 右貼齊（鈴鐺右側尚有首頁／用戶，不可只 anchor 在鈴鐺 wrapper）。
     * 用戶選單仍 anchor 在最右側 wrapper。
     */
    html body .container .header .htfl-notifications-wrapper,
    html body .container > header.header .htfl-notifications-wrapper,
    html body > .header .htfl-notifications-wrapper,
    html body .wrap .hero-top .htfl-notifications-wrapper,
    html body .wrap .panel .top .htfl-notifications-wrapper {
        position: static !important;
    }

    html body .container .header .htfl-notifications-dropdown,
    html body .container > header.header .htfl-notifications-dropdown,
    html body > .header .htfl-notifications-dropdown,
    html body .wrap .hero-top .htfl-notifications-dropdown,
    html body .wrap .panel .top .htfl-notifications-dropdown {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: auto !important;
        right: 0 !important;
        width: min(360px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        z-index: 1100 !important;
    }

    html body .container .header .user-menu-wrapper,
    html body .container > header.header .user-menu-wrapper,
    html body > .header .user-menu-wrapper,
    html body .wrap .hero-top .user-menu-wrapper,
    html body .wrap .panel .top .user-menu-wrapper {
        position: relative !important;
    }

    html body .container .header .user-menu-dropdown,
    html body .container > header.header .user-menu-dropdown,
    html body > .header .user-menu-dropdown,
    html body .wrap .hero-top .user-menu-dropdown,
    html body .wrap .panel .top .user-menu-dropdown {
        left: auto !important;
        right: 0 !important;
        max-width: calc(100vw - 20px) !important;
        z-index: 1100 !important;
    }

    /* /admin：頁首在 .container 外 */
    html body > .header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 12px 12px !important;
    }

    html body > .header > h1 {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 8px 0 0 0 !important;
        font-size: clamp(1.2rem, 5.2vw, 1.55rem) !important;
        line-height: 1.16 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body > .header > .header-actions {
        order: 1 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        justify-content: flex-end !important;
        overflow: visible !important;
        z-index: 21 !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(3px, 1.35vw, 6px) !important;
    }

    /* 系統管理：頂欄 .top */
    html body .wrap .panel .top {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 12px 12px !important;
    }

    html body .wrap .panel .top > div:first-child {
        order: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .wrap .panel .top .title {
        font-size: clamp(1.2rem, 5.2vw, 1.55rem) !important;
        line-height: 1.16 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .wrap .panel .top .subtitle {
        display: none !important;
    }

    html body .wrap .panel .top .actions {
        order: 1 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        justify-content: flex-end !important;
        overflow: visible !important;
        z-index: 21 !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(3px, 1.35vw, 6px) !important;
    }

    html body .wrap .panel .top .actions > * {
        flex-shrink: 0 !important;
    }

    html body .wrap .panel .top .actions .btn.primary {
        padding: 0 clamp(8px, 2.3vw, 11px) !important;
        font-size: clamp(11px, 2.8vw, 12px) !important;
        min-height: clamp(34px, 8.8vw, 38px) !important;
        white-space: nowrap !important;
    }

    /* 首頁 portal：hero 頂欄 */
    html body .wrap .hero-top {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 12px 10px !important;
    }

    html body .wrap .hero-top .brand {
        order: 2 !important;
        font-size: clamp(1.45rem, 6vw, 2rem) !important;
        line-height: 1.1 !important;
        margin-top: clamp(16px, 4.5vw, 22px) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .wrap .hero-top .subtitle {
        display: none !important;
    }

    html body .wrap .hero-top .actions {
        order: 1 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 2px 0 !important;
        justify-content: flex-end !important;
        overflow: visible !important;
        z-index: 21 !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: clamp(3px, 1.35vw, 6px) !important;
    }

    html body .wrap .hero-top .actions > * {
        flex-shrink: 0 !important;
    }

    html body .wrap .hero-top .actions .lang-btn {
        padding: 0 clamp(6px, 2vw, 9px) !important;
        font-size: clamp(10px, 2.5vw, 11px) !important;
        min-height: clamp(34px, 8.8vw, 38px) !important;
        margin-right: 0 !important;
        white-space: nowrap !important;
    }

    /* 所有頁首操作列共用 compact 尺寸（系統內頁 / admin / 首頁 / 系統管理） */
    html body .container .header > .header-actions,
    html body .container > header.header > .header-actions,
    html body > .header > .header-actions,
    html body .wrap .hero-top .actions,
    html body .wrap .panel .top .actions {
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: clamp(3px, 1.35vw, 6px) !important;
    }

    html body .container .header .htfl-hsww,
    html body .container > header.header .htfl-hsww,
    html body > .header .htfl-hsww,
    html body .wrap .hero-top .htfl-hsww,
    html body .wrap .panel .top .htfl-hsww {
        margin-right: 1px !important;
    }

    html body .container .header .htfl-hsww-icon,
    html body .container > header.header .htfl-hsww-icon,
    html body > .header .htfl-hsww-icon,
    html body .wrap .hero-top .htfl-hsww-icon,
    html body .wrap .panel .top .htfl-hsww-icon {
        width: clamp(18px, 5vw, 22px) !important;
        height: clamp(18px, 5vw, 22px) !important;
    }

    html body .container .header .htfl-live-clock,
    html body .container > header.header .htfl-live-clock,
    html body > .header .htfl-live-clock,
    html body .wrap .hero-top .htfl-live-clock,
    html body .wrap .panel .top .htfl-live-clock {
        min-width: 7.4ch !important;
        margin-right: 1px !important;
        font-size: clamp(10.5px, 2.65vw, 12px) !important;
        letter-spacing: 0 !important;
    }

    html body .container .header .htfl-llm-balance,
    html body .container > header.header .htfl-llm-balance,
    html body > .header .htfl-llm-balance,
    html body .wrap .hero-top .htfl-llm-balance,
    html body .wrap .panel .top .htfl-llm-balance {
        min-width: 0 !important;
        max-width: 5.6rem !important;
        margin-right: 1px !important;
        padding: 2px clamp(4px, 1.2vw, 6px) !important;
        font-size: clamp(10px, 2.5vw, 11px) !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body .container .header .htfl-llm-balance.is-reserved,
    html body .container > header.header .htfl-llm-balance.is-reserved,
    html body > .header .htfl-llm-balance.is-reserved,
    html body .wrap .hero-top .htfl-llm-balance.is-reserved,
    html body .wrap .panel .top .htfl-llm-balance.is-reserved {
        min-width: clamp(3.4rem, 13vw, 4.4rem) !important;
    }

    html body .container .header .htfl-notifications-wrapper.is-reserved,
    html body .container > header.header .htfl-notifications-wrapper.is-reserved,
    html body > .header .htfl-notifications-wrapper.is-reserved,
    html body .wrap .hero-top .htfl-notifications-wrapper.is-reserved,
    html body .wrap .panel .top .htfl-notifications-wrapper.is-reserved,
    html body .container .header .htfl-notifications-btn,
    html body .container > header.header .htfl-notifications-btn,
    html body > .header .htfl-notifications-btn,
    html body .wrap .hero-top .htfl-notifications-btn,
    html body .wrap .panel .top .htfl-notifications-btn {
        width: clamp(34px, 8.8vw, 38px) !important;
        height: clamp(34px, 8.8vw, 38px) !important;
        flex-basis: clamp(34px, 8.8vw, 38px) !important;
    }

    html body .container .header .htfl-notifications-btn,
    html body .container > header.header .htfl-notifications-btn,
    html body > .header .htfl-notifications-btn,
    html body .wrap .hero-top .htfl-notifications-btn,
    html body .wrap .panel .top .htfl-notifications-btn,
    html body .container .header .header-btn,
    html body .container > header.header .header-btn,
    html body > .header .header-btn,
    html body .wrap .hero-top .header-btn,
    html body .wrap .panel .top .header-btn,
    html body .container .header .user-menu-btn,
    html body .container > header.header .user-menu-btn,
    html body > .header .user-menu-btn,
    html body .wrap .hero-top .user-menu-btn,
    html body .wrap .panel .top .user-menu-btn {
        min-height: clamp(34px, 8.8vw, 38px) !important;
        border-radius: 9px !important;
    }

    html body .container .header .htfl-notifications-icon,
    html body .container > header.header .htfl-notifications-icon,
    html body > .header .htfl-notifications-icon,
    html body .wrap .hero-top .htfl-notifications-icon,
    html body .wrap .panel .top .htfl-notifications-icon {
        font-size: clamp(15px, 4vw, 17px) !important;
    }

    html body .container .header .header-btn,
    html body .container > header.header .header-btn,
    html body > .header .header-btn,
    html body .wrap .hero-top .header-btn,
    html body .wrap .panel .top .header-btn,
    html body .container .header .user-menu-btn,
    html body .container > header.header .user-menu-btn,
    html body > .header .user-menu-btn,
    html body .wrap .hero-top .user-menu-btn,
    html body .wrap .panel .top .user-menu-btn {
        padding: 0 clamp(8px, 2.3vw, 11px) !important;
        font-size: clamp(12px, 3.05vw, 13px) !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    html body .container .header .user-menu-btn,
    html body .container > header.header .user-menu-btn,
    html body > .header .user-menu-btn,
    html body .wrap .hero-top .user-menu-btn,
    html body .wrap .panel .top .user-menu-btn {
        gap: 4px !important;
    }

    html body .container .header .user-menu-btn::after,
    html body .container > header.header .user-menu-btn::after,
    html body > .header .user-menu-btn::after,
    html body .wrap .hero-top .user-menu-btn::after,
    html body .wrap .panel .top .user-menu-btn::after {
        font-size: 8px !important;
    }

    body {
        padding: 10px !important;
    }

    .container,
    .wrap,
    .panel {
        border-radius: 12px !important;
    }

    .content,
    .page-content,
    .panel-content {
        padding: 12px !important;
    }

    .header,
    .top {
        padding: 12px 12px !important;
    }

    .header-actions,
    .actions,
    .toolbar,
    .filters {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    .header-btn,
    .btn,
    .user-menu-btn,
    button,
    a.btn {
        min-height: 42px;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="image"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    textarea {
        font-size: 16px !important;
        min-height: 42px;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-height: auto !important;
        width: auto !important;
        max-width: none !important;
        font-size: inherit !important;
    }

    input[type="file"] {
        min-height: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    .form-group select,
    .form-group textarea,
    .filter-group input,
    .filter-group select,
    .filter-group textarea,
    .control-group input,
    .control-group select,
    .control-group textarea,
    .modal-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
    .modal-content select,
    .modal-content textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .table-container,
    .table-wrap,
    .table-scroll,
    .sm-site-memo-list-table-wrap,
    #plans-table-wrap,
    #logs-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-content {
        width: min(100%, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px);
        overflow: auto;
    }

    /* ---------- 全系統：表單網格／篩選／首頁卡／圖表區（≤768px）避免橫向撐爆 ---------- */
    html body .wrap .card-grid {
        grid-template-columns: 1fr !important;
    }

    html body .container .tools-grid {
        grid-template-columns: 1fr !important;
    }

    html body .container .form-row,
    html body .content .form-row,
    html body .card .form-row,
    html body .htfl-modal .form-row,
    html body .modal-content .form-row,
    html body #log-modal .form-row,
    html body .modal .form-row {
        grid-template-columns: 1fr !important;
    }

    html body .container .form-row > *,
    html body .content .form-row > *,
    html body .card .form-row > *,
    html body .htfl-modal .form-row > *,
    html body .modal-content .form-row > *,
    html body #log-modal .form-row > *,
    html body .modal .form-row > * {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body .container .filter-group,
    html body .content .filter-group,
    html body .card .filter-group,
    html body .filter-section .filter-group,
    html body .filter-card-shell .filter-group {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    html body .container .form-group[style*="min-width"],
    html body .content .form-group[style*="min-width"] {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body .modal-body .form-grid,
    html body #modalMask .form-grid {
        grid-template-columns: 1fr !important;
    }

    html body #chartView {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    html body #chartView > div:first-child {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body #chartLegendOnce {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
    }

    html body #bqProjectSelect,
    html body #bqHeaderSelect {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body .mm-view-meta-stack,
    html body .mm-meta-att-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    html body .grid-2,
    html body .grid-3 {
        grid-template-columns: 1fr !important;
    }

    html body .toolbar .input,
    html body .toolbar .select,
    html body .toolbar input:not([type="checkbox"]):not([type="radio"]),
    html body .toolbar select {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body #modalMask .modal {
        width: min(880px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box !important;
    }

    #inputSection .pcr-input-header {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    #inputSection .pcr-input-title {
        flex: 0 0 auto;
        margin: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        font-size: 1em !important;
        white-space: nowrap;
    }

    #inputSection .pcr-date-save-row {
        flex: 1 1 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        min-width: 0 !important;
        width: auto !important;
    }

    #inputSection .pcr-date-label {
        display: none !important;
    }

    #inputSection .pcr-date-control {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    #inputSection .pcr-save-data-btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        min-height: 44px;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #inputSection .pcr-save-status-inline {
        flex: 1 1 100%;
        width: 100%;
    }

    #sm-site-memo-list-table,
    #plans-table,
    #logs-table,
    #projectsTable,
    #employeesTable {
        min-width: max-content;
    }

    .sm-list-search-panel input#sm-llm-search-q,
    .sm-list-search-panel input#sm-direct-search-q,
    #sm-direct-search-q,
    #sm-list-filter-project,
    #sm-filter-status {
        min-width: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 430px) {
    body {
        padding: 8px !important;
    }

    html body .container .header,
    html body .container > header.header,
    html body > .header,
    html body .wrap .hero-top,
    html body .wrap .panel .top {
        padding: 10px 10px !important;
    }

    html body .container .header > h1,
    html body .container > header.header > h1,
    html body > .header > h1 {
        margin-top: 7px !important;
    }

    html body .wrap .hero-top .brand {
        margin-top: 18px !important;
    }

    html body .container .header > .header-actions,
    html body .container > header.header > .header-actions,
    html body > .header > .header-actions,
    html body .wrap .hero-top .actions,
    html body .wrap .panel .top .actions {
        gap: 4px !important;
    }

    .toolbar {
        gap: 6px !important;
    }

    .header-btn,
    .btn,
    .user-menu-btn {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }

    .table-container table th,
    .table-container table td,
    #plans-table th,
    #plans-table td,
    #logs-table th,
    #logs-table td,
    #projectsTable th,
    #projectsTable td,
    #employeesTable th,
    #employeesTable td,
    #inputTable th,
    #inputTable td {
        white-space: nowrap;
    }
}

@media (max-width: 390px) {
    html body .container .header,
    html body .container > header.header,
    html body > .header,
    html body .wrap .hero-top,
    html body .wrap .panel .top {
        padding: 9px 8px !important;
    }

    html body .container .header > .header-actions,
    html body .container > header.header > .header-actions,
    html body > .header > .header-actions,
    html body .wrap .hero-top .actions,
    html body .wrap .panel .top .actions {
        gap: 3px !important;
    }

    html body .container .header .htfl-live-clock,
    html body .container > header.header .htfl-live-clock,
    html body > .header .htfl-live-clock,
    html body .wrap .hero-top .htfl-live-clock,
    html body .wrap .panel .top .htfl-live-clock {
        font-size: 10px !important;
    }

    html body .container .header .htfl-llm-balance.is-reserved,
    html body .container > header.header .htfl-llm-balance.is-reserved,
    html body > .header .htfl-llm-balance.is-reserved,
    html body .wrap .hero-top .htfl-llm-balance.is-reserved,
    html body .wrap .panel .top .htfl-llm-balance.is-reserved {
        min-width: 3.25rem !important;
    }

    .toolbar {
        gap: 5px !important;
    }

    .header-btn,
    .btn,
    .user-menu-btn {
        padding: 7px 9px !important;
        font-size: 12px !important;
    }
}