/* ============================================================
   Universal ERP - Tablet responsive layer
   Loaded after mobile-erp.css. It only activates when
   erp-responsive.js identifies a touch tablet.
   ============================================================ */

html[data-erp-device="tablet"] {
    --tablet-page-max-portrait: 980px;
    --tablet-page-max-landscape: 1320px;
    --tablet-gap: 16px;
    --tablet-card-radius: 22px;
    --tablet-control-height: 48px;
}

html[data-erp-device="tablet"] body {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ---------- Shell / top bar ---------- */
html[data-erp-device="tablet"] .topbar {
    height: 72px;
    padding: 11px 24px;
}

html[data-erp-device="tablet"] .brand {
    font-size: 22px;
    line-height: 1.15;
}

html[data-erp-device="tablet"] .sub {
    margin-top: 3px;
    font-size: 13px;
}

html[data-erp-device="tablet"] .top-actions {
    gap: 10px;
}

html[data-erp-device="tablet"] .top-link {
    min-height: 42px;
    padding: 10px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* ---------- Page width ---------- */
html[data-erp-device="tablet"] .mobile-page {
    width: 100%;
    max-width: var(--tablet-page-max-portrait);
    padding: 28px 28px 64px;
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .mobile-page {
    max-width: var(--tablet-page-max-landscape);
    padding: 30px 34px 68px;
}

html[data-erp-device="tablet"] .customer-portal-page,
html[data-erp-device="tablet"] .login-page {
    max-width: 980px;
}

/* ---------- Titles / cards ---------- */
html[data-erp-device="tablet"] .hero-card,
html[data-erp-device="tablet"] .detail-hero {
    padding: 26px;
    border-radius: 26px;
    margin-bottom: 18px;
}

html[data-erp-device="tablet"] .hero-card h1,
html[data-erp-device="tablet"] .page-title h1 {
    font-size: 30px;
}

html[data-erp-device="tablet"] .hero-card p,
html[data-erp-device="tablet"] .page-title p,
html[data-erp-device="tablet"] .detail-hero span,
html[data-erp-device="tablet"] .detail-hero small {
    font-size: 16px;
    line-height: 1.65;
}

html[data-erp-device="tablet"] .pill {
    padding: 7px 12px;
    font-size: 13px;
}

html[data-erp-device="tablet"] .card,
html[data-erp-device="tablet"] .list-card,
html[data-erp-device="tablet"] .service-card,
html[data-erp-device="tablet"] .customer-action-card {
    border-radius: var(--tablet-card-radius);
}

html[data-erp-device="tablet"] .card {
    padding: 20px 22px;
    margin-bottom: 18px;
}

html[data-erp-device="tablet"] .card h2,
html[data-erp-device="tablet"] .section-title h2,
html[data-erp-device="tablet"] .section-heading h2 {
    font-size: 21px;
}

html[data-erp-device="tablet"] .list-card,
html[data-erp-device="tablet"] .customer-link,
html[data-erp-device="tablet"] .service-card {
    padding: 19px 21px;
}

html[data-erp-device="tablet"] .list-card strong,
html[data-erp-device="tablet"] .customer-link strong,
html[data-erp-device="tablet"] .service-card h3 {
    font-size: 19px;
}

html[data-erp-device="tablet"] .list-card span,
html[data-erp-device="tablet"] .list-card small,
html[data-erp-device="tablet"] .customer-link span,
html[data-erp-device="tablet"] .customer-link small,
html[data-erp-device="tablet"] .service-card p,
html[data-erp-device="tablet"] .service-card small {
    font-size: 15px;
}

/* ---------- Dashboard / module grids ---------- */
html[data-erp-device="tablet"] .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tablet-gap);
}

html[data-erp-device="tablet"] .kpi-card {
    min-height: 126px;
    padding: 20px;
}

html[data-erp-device="tablet"] .kpi-card span {
    font-size: 14px;
}

html[data-erp-device="tablet"] .kpi-card strong {
    font-size: 34px;
}

html[data-erp-device="tablet"] .grid-2,
html[data-erp-device="tablet"] .form-grid-2,
html[data-erp-device="tablet"] .progress-filter-card,
html[data-erp-device="tablet"] .rental-machine-details,
html[data-erp-device="tablet"] .progress-detail-grid {
    gap: 14px 16px;
}

html[data-erp-device="tablet"] .module-card {
    min-height: 128px;
    padding: 19px;
}

html[data-erp-device="tablet"] .module-card span {
    font-size: 17px;
}

html[data-erp-device="tablet"] .module-card strong {
    font-size: 14px;
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .home-menu-items,
html[data-erp-device="tablet"][data-erp-orientation="landscape"] .home-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-erp-device="tablet"][data-erp-orientation="portrait"] .home-menu-items,
html[data-erp-device="tablet"][data-erp-orientation="portrait"] .home-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Forms / touch targets ---------- */
html[data-erp-device="tablet"] label {
    font-size: 15px;
}

html[data-erp-device="tablet"] .input,
html[data-erp-device="tablet"] .btn-scan {
    min-height: var(--tablet-control-height);
    height: var(--tablet-control-height);
    font-size: 16px;
    border-radius: 14px;
}

html[data-erp-device="tablet"] .textarea {
    min-height: 118px;
    padding: 13px 14px;
    font-size: 16px;
}

html[data-erp-device="tablet"] .btn-primary,
html[data-erp-device="tablet"] .btn-secondary,
html[data-erp-device="tablet"] .btn-danger,
html[data-erp-device="tablet"] .link-button,
html[data-erp-device="tablet"] .tab-btn {
    min-height: var(--tablet-control-height);
    height: auto;
    padding: 10px 16px;
    font-size: 16px;
}

html[data-erp-device="tablet"] .check-row input,
html[data-erp-device="tablet"] .checkbox-line input {
    width: 22px;
    height: 22px;
}

html[data-erp-device="tablet"] .file-input,
html[data-erp-device="tablet"] .upload-panel {
    padding: 16px 18px;
}

/* ---------- Navigation ---------- */
html[data-erp-device="tablet"] .side-nav {
    width: min(42vw, 360px);
    max-width: 420px;
    padding-left: 18px;
    padding-right: 18px;
    gap: 11px;
}

html[data-erp-device="tablet"] .side-nav-head strong {
    font-size: 24px;
}

html[data-erp-device="tablet"] .side-nav a,
html[data-erp-device="tablet"] .side-nav-group-toggle {
    min-height: 58px;
    font-size: 18px;
}

html[data-erp-device="tablet"] .side-nav .side-nav-submenu a {
    min-height: 52px;
    font-size: 17px;
}

html[data-erp-device="tablet"] .side-nav-rail {
    min-width: 54px;
    min-height: 100px;
    font-size: 17px;
}

/* ---------- Customer portal / action tiles ---------- */
html[data-erp-device="tablet"] .customer-action-grid,
html[data-erp-device="tablet"] .service-category-grid {
    gap: 14px;
}

html[data-erp-device="tablet"] .customer-action-card {
    min-height: 150px;
    padding: 20px;
}

html[data-erp-device="tablet"] .customer-action-card strong {
    font-size: 20px;
}

html[data-erp-device="tablet"] .customer-action-card small {
    font-size: 14px;
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .customer-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .service-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

html[data-erp-device="tablet"][data-erp-orientation="portrait"] .customer-action-grid,
html[data-erp-device="tablet"][data-erp-orientation="portrait"] .service-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Lists / detail / product price ---------- */
html[data-erp-device="tablet"] .info-row,
html[data-erp-device="tablet"] .info-block {
    padding-top: 12px;
    padding-bottom: 12px;
}

html[data-erp-device="tablet"] .info-row span,
html[data-erp-device="tablet"] .info-block span {
    font-size: 15px;
}

html[data-erp-device="tablet"] .info-row b,
html[data-erp-device="tablet"] .info-block p {
    font-size: 16px;
}

html[data-erp-device="tablet"] .quick-tabs {
    gap: 10px;
}

html[data-erp-device="tablet"] .product-price-option {
    padding: 16px 18px;
}

html[data-erp-device="tablet"] .product-price-option strong {
    font-size: 18px;
}

html[data-erp-device="tablet"] .product-price-value {
    min-height: 112px;
}

html[data-erp-device="tablet"] .product-price-value strong {
    font-size: 28px;
}

/* ---------- Signature / camera ---------- */
html[data-erp-device="tablet"] .signature-canvas {
    height: 320px;
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .signature-canvas {
    height: 280px;
}

html[data-erp-device="tablet"] .erp-signature-fullscreen-panel {
    width: min(96vw, 1180px);
    padding: 16px;
}

/* ---------- Tables / wide data ---------- */
html[data-erp-device="tablet"] table {
    font-size: 15px;
}

html[data-erp-device="tablet"] th,
html[data-erp-device="tablet"] td {
    padding: 9px 10px;
}

html[data-erp-device="tablet"] .table-scroll,
html[data-erp-device="tablet"] .table-wrap,
html[data-erp-device="tablet"] .responsive-table,
html[data-erp-device="tablet"] .data-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Landscape: use horizontal space more aggressively ---------- */
html[data-erp-device="tablet"][data-erp-orientation="landscape"] .product-price-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .meter-chip-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .progress-detail-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ---------- Portrait safety ---------- */
html[data-erp-device="tablet"][data-erp-orientation="portrait"] .form-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Keep very narrow split-screen tablet windows usable as phone layout. */
@media (max-width: 699px) {
    html[data-erp-device="tablet"] .mobile-page {
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ---------- Tablet-only width fixes for components that are intentionally narrow on phones ---------- */
html[data-erp-device="tablet"] .customer-portal-page {
    width: 100%;
    max-width: 1020px;
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .customer-portal-page {
    max-width: 1220px;
}

html[data-erp-device="tablet"] .barcode-panel {
    width: min(92vw, 640px);
    padding: 18px;
}

html[data-erp-device="tablet"] .barcode-video {
    min-height: 360px;
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .barcode-panel {
    width: min(82vw, 760px);
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .barcode-video {
    min-height: 320px;
    max-height: 58vh;
}

/* ---------- Device mode wording ---------- */
.erp-mode-tablet,
.erp-mode-desktop {
    display: none;
}

html[data-erp-device="tablet"] .erp-mode-phone,
html[data-erp-device="desktop-web"] .erp-mode-phone {
    display: none;
}

html[data-erp-device="tablet"] .erp-mode-tablet {
    display: inline;
}

html[data-erp-device="desktop-web"] .erp-mode-desktop {
    display: inline;
}

/* ============================================================
   Tablet V2 - strong layout overrides
   目的：平板版要明顯不同於手機版，並防止 mobile-erp.css 或瀏覽器快取
   讓 820px 手機測試寬度繼續生效。
   ============================================================ */

html[data-erp-device="tablet"],
html.erp-device-tablet {
    --tablet-page-max-portrait: 1180px;
    --tablet-page-max-landscape: 1420px;
    --tablet-gap: 18px;
    --tablet-card-radius: 22px;
    --tablet-control-height: 50px;
}

html[data-erp-device="tablet"] body,
body.erp-device-tablet {
    min-width: 0;
    font-size: 16px;
}

/* 平板主內容：直接吃掉大部分可用寬度，不再維持手機 820px 窄版。 */
html[data-erp-device="tablet"] .mobile-page,
body.erp-device-tablet .mobile-page {
    width: calc(100vw - 48px) !important;
    max-width: var(--tablet-page-max-portrait) !important;
    margin: 0 auto !important;
    padding: 28px 24px 72px !important;
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .mobile-page,
html.erp-tablet-landscape .mobile-page,
body.erp-tablet-landscape .mobile-page {
    width: calc(100vw - 72px) !important;
    max-width: var(--tablet-page-max-landscape) !important;
    padding: 30px 32px 76px !important;
}

/* 首頁 KPI：平板固定三欄，與手機兩欄形成明顯差異。 */
html[data-erp-device="tablet"] .kpi-grid,
body.erp-device-tablet .kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

html[data-erp-device="tablet"] .kpi-card,
body.erp-device-tablet .kpi-card {
    min-height: 132px !important;
    padding: 20px 22px !important;
}

html[data-erp-device="tablet"] .kpi-card strong,
body.erp-device-tablet .kpi-card strong {
    font-size: 36px !important;
}

/* 功能卡：直向 2 欄、橫向 3 欄。 */
html[data-erp-device="tablet"] .home-module-grid,
html[data-erp-device="tablet"] .home-menu-items,
body.erp-device-tablet .home-module-grid,
body.erp-device-tablet .home-menu-items {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .home-module-grid,
html[data-erp-device="tablet"][data-erp-orientation="landscape"] .home-menu-items,
html.erp-tablet-landscape .home-module-grid,
html.erp-tablet-landscape .home-menu-items,
body.erp-tablet-landscape .home-module-grid,
body.erp-tablet-landscape .home-menu-items {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html[data-erp-device="tablet"] .module-card,
body.erp-device-tablet .module-card {
    min-height: 138px !important;
    padding: 20px !important;
}

html[data-erp-device="tablet"] .home-menu-toggle,
body.erp-device-tablet .home-menu-toggle {
    min-height: 88px !important;
    padding: 18px 20px !important;
}

html[data-erp-device="tablet"] .home-menu-toggle strong,
body.erp-device-tablet .home-menu-toggle strong {
    font-size: 22px !important;
}

html[data-erp-device="tablet"] .home-menu-toggle small,
body.erp-device-tablet .home-menu-toggle small {
    font-size: 14px !important;
}

/* 表單與一般雙欄資料在平板維持真正雙欄。 */
html[data-erp-device="tablet"] .grid-2,
html[data-erp-device="tablet"] .form-grid-2,
html[data-erp-device="tablet"] .progress-filter-card,
html[data-erp-device="tablet"] .rental-machine-details,
body.erp-device-tablet .grid-2,
body.erp-device-tablet .form-grid-2,
body.erp-device-tablet .progress-filter-card,
body.erp-device-tablet .rental-machine-details {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* 但首頁專用 grid 由上方 2/3 欄規則控制。 */
html[data-erp-device="tablet"] .grid-2.home-module-grid,
html[data-erp-device="tablet"] .grid-2.home-menu-items,
body.erp-device-tablet .grid-2.home-module-grid,
body.erp-device-tablet .grid-2.home-menu-items {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

html[data-erp-device="tablet"][data-erp-orientation="landscape"] .grid-2.home-module-grid,
html[data-erp-device="tablet"][data-erp-orientation="landscape"] .grid-2.home-menu-items,
html.erp-tablet-landscape .grid-2.home-module-grid,
html.erp-tablet-landscape .grid-2.home-menu-items,
body.erp-tablet-landscape .grid-2.home-module-grid,
body.erp-tablet-landscape .grid-2.home-menu-items {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* 平板觸控尺寸 */
html[data-erp-device="tablet"] .input,
html[data-erp-device="tablet"] .btn-scan,
body.erp-device-tablet .input,
body.erp-device-tablet .btn-scan {
    min-height: 50px !important;
    height: 50px !important;
    font-size: 16px !important;
}

html[data-erp-device="tablet"] .btn-primary,
html[data-erp-device="tablet"] .btn-secondary,
html[data-erp-device="tablet"] .btn-danger,
html[data-erp-device="tablet"] .link-button,
body.erp-device-tablet .btn-primary,
body.erp-device-tablet .btn-secondary,
body.erp-device-tablet .btn-danger,
body.erp-device-tablet .link-button {
    min-height: 50px !important;
    font-size: 16px !important;
}

/* 平板側邊選單更寬，仍保留滑出式操作，適合觸控。 */
html[data-erp-device="tablet"] .side-nav,
body.erp-device-tablet .side-nav {
    width: min(44vw, 390px) !important;
    max-width: 420px !important;
}

/* 超大型平板橫向（例如 12~14 吋）：首頁功能卡可四欄。 */
@media (min-width: 1280px) {
    html[data-erp-device="tablet"][data-erp-orientation="landscape"] .home-module-grid,
    html.erp-tablet-landscape .home-module-grid,
    body.erp-tablet-landscape .home-module-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}