/* =========================================================================
   Tablet Sales on the gm design.

   A visual layer only: colours, type, borders, radii, shadows, buttons, pills and tables.
   Every size, grid and orientation rule for the tablet app stays in app.css and the scoped
   .razor.css files, so touch targets and the landscape POS layout are unchanged.

   Rules are anchored on the ids #gm-tablet (TabletLayout shell) and #gm-tablet-login (login
   page) so they win over the two-class media-query rules in app.css and the scoped CSS.
   ========================================================================= */

#gm-tablet,
#gm-tablet-login {
    --t-navy: #10233F;
    --t-navy-700: #284767;
    --t-muted: #6F86A5;
    --t-border: rgba(97, 139, 162, .22);
    --t-border-soft: rgba(97, 139, 162, .13);
    --t-teal-700: #0B7D95;
    --t-teal-600: #0D9F99;
    --t-teal-500: #14C9B1;
    --t-tint: rgba(20, 201, 177, .1);
    --t-grad: linear-gradient(90deg, #0C958E 0%, #15CFC0 100%);
    --t-grad-hover: linear-gradient(90deg, #0A857F 0%, #12B9AB 100%);
    --t-shadow: 0 10px 30px rgba(28, 75, 98, .07);
    --t-ring: 0 0 0 3px rgba(20, 201, 177, .18);
    --t-page: #F3F7F9;

    background: var(--t-page);
    color: var(--t-navy);
    font-family: Inter, "Plus Jakarta Sans", Poppins, "Segoe UI", system-ui, sans-serif;
}

/* ------------------------------------------------------------- top bar */
#gm-tablet .tablet-portal-topbar {
    border-bottom: 1px solid var(--t-border);
    background: #fff;
    box-shadow: 0 2px 12px rgba(28, 75, 98, .05);
}

#gm-tablet .tablet-portal-brand,
#gm-tablet .tablet-portal-brand strong,
#gm-tablet .tablet-user-copy strong {
    color: var(--t-navy);
}

#gm-tablet .tablet-portal-brand small,
#gm-tablet .tablet-user-copy small {
    color: var(--t-muted);
}

#gm-tablet .tablet-portal-brand-icon {
    border-radius: 12px;
    background: var(--t-grad);
    color: #fff;
    box-shadow: 0 6px 16px rgba(13, 159, 153, .28);
}

#gm-tablet .tablet-portal-nav-link {
    border-radius: 11px;
    color: var(--t-navy-700);
}

#gm-tablet .tablet-portal-nav-link:hover {
    background: #F1F8FA;
    color: var(--t-navy);
}

#gm-tablet .tablet-portal-nav-link.active {
    background: var(--t-tint);
    color: var(--t-teal-700);
    box-shadow: inset 0 0 0 1px rgba(13, 159, 153, .25);
}

#gm-tablet .tablet-portal-user {
    border-left-color: var(--t-border);
}

#gm-tablet .tablet-user-avatar,
#gm-tablet .tablet-pos-user > span {
    background: #E7F6F1;
    color: #0B8A77;
    font-weight: 700;
}

#gm-tablet .tablet-pos-user strong { color: var(--t-navy); }
#gm-tablet .tablet-pos-user small { color: var(--t-muted); }

/* --------------------------------------------------------- cards / panels */
#gm-tablet .tablet-list-metric,
#gm-tablet .tablet-list-filters,
#gm-tablet .tablet-list-panel,
#gm-tablet .tablet-module-card,
#gm-tablet .tablet-entry-section,
#gm-tablet .tablet-summary-panel,
#gm-tablet .tablet-entry-page > .tablet-pos-heading,
#gm-tablet .tablet-entry-page .tablet-pos-heading {
    border: 1px solid var(--t-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--t-shadow);
}

#gm-tablet .tablet-list-metric,
#gm-tablet .tablet-list-filters {
    box-shadow: 0 4px 14px rgba(28, 75, 98, .05);
}

/* The page headers are only cards in landscape (that's where app.css gives them a background
   and padding), so only their frame is restyled here. */
#gm-tablet .tablet-list-hero,
#gm-tablet .tablet-dashboard-heading {
    border-color: var(--t-border);
    border-radius: 16px;
}

/* ---------------------------------------------------------------- headings */
#gm-tablet h1,
#gm-tablet h2,
#gm-tablet h3,
#gm-tablet .tablet-list-hero h1,
#gm-tablet .tablet-dashboard-heading h1,
#gm-tablet .tablet-pos-title h1,
#gm-tablet .tablet-entry-lines-heading h2,
#gm-tablet .tablet-list-panel-heading strong,
#gm-tablet .tablet-module-title,
#gm-tablet .tablet-module-stat strong,
#gm-tablet .tablet-list-metric strong,
#gm-tablet .tablet-summary-panel::before,
#gm-tablet .tablet-entry-totals span {
    color: var(--t-navy);
}

#gm-tablet .tablet-list-hero h1,
#gm-tablet .tablet-dashboard-heading h1 {
    letter-spacing: -.02em;
}

#gm-tablet .tablet-sales-eyebrow,
#gm-tablet .tablet-dashboard-heading .tablet-sales-eyebrow {
    color: var(--t-teal-700);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#gm-tablet .tablet-list-hero p,
#gm-tablet .tablet-dashboard-heading p,
#gm-tablet .tablet-sales-heading p,
#gm-tablet .tablet-list-panel-heading small,
#gm-tablet .tablet-list-metric small,
#gm-tablet .tablet-module-subtitle,
#gm-tablet .tablet-module-stat small,
#gm-tablet .tablet-module-stats,
#gm-tablet .tablet-entry-section-title p,
#gm-tablet .tablet-cell-subtitle,
#gm-tablet .tablet-list-pagination,
#gm-tablet .tablet-modal-title small,
#gm-tablet .tablet-alloc-doc small {
    color: var(--t-muted);
}

#gm-tablet .form-label,
#gm-tablet .tablet-notes-grid .form-label {
    color: var(--t-navy);
    font-weight: 600;
}

#gm-tablet .text-danger,
#gm-tablet-login .text-danger {
    color: #E0475B !important;
}

/* --------------------------------------------------------- coloured icons */
/* One palette for metric, stat, panel and module icons: blue = totals, amber = drafts,
   green = done / money in, violet = customers / closed. */
#gm-tablet .tablet-list-metric > i,
#gm-tablet .tablet-list-panel-icon,
#gm-tablet .tablet-module-icon {
    border-radius: 12px;
}

#gm-tablet .metric-blue > i,
#gm-tablet .stat-total > i,
#gm-tablet .tablet-list-panel-icon.invoice-icon,
#gm-tablet .tablet-module-card-invoices .tablet-module-icon { background: #E3F2FD; color: #1E6FD9; }

#gm-tablet .metric-amber > i,
#gm-tablet .stat-draft > i,
#gm-tablet .tablet-list-panel-icon.order-icon,
#gm-tablet .tablet-module-card-orders .tablet-module-icon { background: #FDF0E3; color: #B57611; }

#gm-tablet .metric-green > i,
#gm-tablet .stat-complete > i,
#gm-tablet .tablet-list-panel-icon.receipt-icon,
#gm-tablet .tablet-module-card-receipts .tablet-module-icon { background: #E7F6F1; color: #0B8A77; }

#gm-tablet .metric-neutral > i,
#gm-tablet .tablet-list-panel-icon.customer-icon,
#gm-tablet .tablet-module-card-customers .tablet-module-icon { background: #F3E8FD; color: #7C3AED; }

/* -------------------------------------------------------------- dashboard */
#gm-tablet .tablet-module-open {
    border-bottom-color: var(--t-border-soft);
    color: var(--t-navy);
}

#gm-tablet .tablet-module-arrow {
    border-color: var(--t-border);
    background: #F7FBFC;
    color: var(--t-navy-700);
}

#gm-tablet .tablet-module-card:hover .tablet-module-arrow,
#gm-tablet .tablet-module-open:focus-visible .tablet-module-arrow {
    border-color: rgba(13, 159, 153, .35);
    background: var(--t-tint);
    color: var(--t-teal-700);
}

#gm-tablet .tablet-module-card:focus-within {
    border-color: rgba(13, 159, 153, .4);
}

#gm-tablet .tablet-module-stat + .tablet-module-stat {
    border-left-color: var(--t-border-soft);
}

/* ---------------------------------------------------------------- buttons */
#gm-tablet .btn,
#gm-tablet-login .btn {
    font-weight: 600;
}

#gm-tablet .tablet-touch-button,
#gm-tablet .tablet-list-hero-actions .btn,
#gm-tablet .tablet-dashboard-create,
#gm-tablet .tablet-refresh-button,
#gm-tablet .tablet-entry-actions .btn,
#gm-tablet .tablet-entry-lines-heading .tablet-touch-button,
#gm-tablet .tablet-clear-filter,
#gm-tablet .tablet-pos-more,
#gm-tablet-login .btn {
    border-radius: 11px;
}

#gm-tablet .btn-primary,
#gm-tablet-login .btn-primary {
    border: 0;
    background: var(--t-grad);
    color: #fff;
}

#gm-tablet .btn-primary:hover:not(:disabled),
#gm-tablet .btn-primary:focus-visible,
#gm-tablet-login .btn-primary:hover:not(:disabled),
#gm-tablet-login .btn-primary:focus-visible {
    background: var(--t-grad-hover);
    color: #fff;
    box-shadow: 0 6px 16px rgba(13, 159, 153, .3);
}

#gm-tablet .btn-primary:active:not(:disabled),
#gm-tablet-login .btn-primary:active:not(:disabled) {
    background: linear-gradient(90deg, #097772 0%, #10A699 100%);
    color: #fff;
}

#gm-tablet .btn-success {
    border: 0;
    background: linear-gradient(90deg, #1E8E4E 0%, #2DB86B 100%);
    color: #fff;
}

#gm-tablet .btn-success:hover:not(:disabled),
#gm-tablet .btn-success:focus-visible {
    background: linear-gradient(90deg, #197B43 0%, #26A25E 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(30, 142, 78, .28);
}

#gm-tablet .btn-outline-primary {
    border: 1px solid rgba(13, 159, 153, .4);
    background: #fff;
    color: var(--t-teal-700);
}

#gm-tablet .btn-outline-primary:hover:not(:disabled),
#gm-tablet .btn-outline-primary:focus-visible {
    border-color: rgba(13, 159, 153, .55);
    background: var(--t-tint);
    color: var(--t-teal-700);
}

#gm-tablet .btn-light {
    border: 1px solid var(--t-border);
    background: #fff;
    color: var(--t-navy-700);
}

#gm-tablet .btn-light:hover:not(:disabled),
#gm-tablet .btn-light:focus-visible {
    border-color: rgba(97, 139, 162, .38);
    background: #F1F8FA;
    color: var(--t-navy);
}

#gm-tablet .btn-subtle-primary { border: 0; background: var(--t-tint); color: var(--t-teal-700); }
#gm-tablet .btn-subtle-success { border: 0; background: #E6F6EC; color: #1E8E4E; }
#gm-tablet .btn-subtle-danger { border: 0; background: #FCEBEE; color: #C0384A; }
#gm-tablet .btn-subtle-info { border: 0; background: #E6F3FB; color: #2D72D9; }

#gm-tablet .btn-subtle-primary:hover:not(:disabled) { background: var(--t-teal-600); color: #fff; }
#gm-tablet .btn-subtle-success:hover:not(:disabled) { background: #1E8E4E; color: #fff; }
#gm-tablet .btn-subtle-danger:hover:not(:disabled) { background: #C0384A; color: #fff; }
#gm-tablet .btn-subtle-info:hover:not(:disabled) { background: #2D72D9; color: #fff; }

#gm-tablet .tablet-row-action,
#gm-tablet .tablet-line-remove,
#gm-tablet .tablet-list-pagination .btn {
    border-radius: 9px;
}

#gm-tablet .btn:focus-visible,
#gm-tablet-login .btn:focus-visible {
    outline: none;
    box-shadow: var(--t-ring);
}

#gm-tablet .btn:disabled,
#gm-tablet-login .btn:disabled {
    opacity: .55;
}

/* ------------------------------------------------------------ form fields */
#gm-tablet .form-control,
#gm-tablet .form-select,
#gm-tablet-login .form-control {
    border-color: var(--t-border);
    border-radius: 11px;
    color: var(--t-navy);
}

#gm-tablet .form-control::placeholder,
#gm-tablet-login .form-control::placeholder {
    color: #9DB1C6;
}

#gm-tablet .form-control:focus,
#gm-tablet .form-select:focus,
#gm-tablet-login .form-control:focus {
    border-color: var(--t-teal-500);
    box-shadow: var(--t-ring);
}

#gm-tablet .form-control:disabled,
#gm-tablet .form-select:disabled,
#gm-tablet .form-control[readonly] {
    background-color: #F7FAFC;
    color: var(--t-navy-700);
}

#gm-tablet .tablet-search-box > i,
#gm-tablet .tablet-pos-search > i {
    color: var(--t-muted);
}

#gm-tablet .tablet-date-filter > span {
    color: var(--t-muted);
    font-weight: 600;
}

/* dropdown menus (user menu, More, searchable pickers) */
#gm-tablet .dropdown-menu {
    border: 1px solid var(--t-border);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(16, 35, 63, .14);
}

#gm-tablet .dropdown-item {
    border-radius: 8px;
    color: var(--t-navy);
}

#gm-tablet .dropdown-item:hover,
#gm-tablet .dropdown-item:focus {
    background: #F1F8FA;
    color: var(--t-navy);
}

#gm-tablet .dropdown-item.active,
#gm-tablet .dropdown-item:active {
    background: var(--t-tint);
    color: var(--t-teal-700);
}

/* ------------------------------------------------------------------ tables */
#gm-tablet .tablet-list-panel-heading {
    border-bottom-color: var(--t-border-soft);
}

#gm-tablet .tablet-list-count {
    background: var(--t-tint);
    color: var(--t-teal-700);
    font-weight: 600;
}

#gm-tablet .tablet-list-table {
    color: var(--t-navy);
}

#gm-tablet .tablet-list-table th {
    background: #F7FBFC;
    color: var(--t-muted);
    font-weight: 600;
    box-shadow: inset 0 -1px 0 var(--t-border-soft);
}

#gm-tablet .tablet-list-table td {
    border-bottom-color: var(--t-border-soft);
}

#gm-tablet .tablet-list-table tbody tr:hover {
    background: #FAFDFE;
}

/* phone-width card rows */
#gm-tablet .tablet-list-table td::before {
    color: var(--t-muted);
}

/* Row titles (document numbers on the order/invoice/receipt lists, names on Customers). */
#gm-tablet .tablet-doc-link {
    color: var(--t-teal-700);
    font-weight: 700;
}

#gm-tablet .tablet-pos-docno {
    display: inline-block;
    padding: .12rem .45rem;
    border-radius: 7px;
    background: var(--t-tint);
    color: var(--t-teal-700);
    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
    font-weight: 600;
    letter-spacing: -.01em;
}

#gm-tablet .tablet-list-pagination {
    border-top-color: var(--t-border-soft);
}

/* status pills: Bootstrap "badge bg-*-subtle text-*" (utilities are !important) */
#gm-tablet .badge {
    border-radius: 999px;
    font-weight: 600;
}

#gm-tablet .badge.bg-success-subtle { background-color: rgba(11, 165, 143, .14) !important; color: #0B8A77 !important; }
#gm-tablet .badge.bg-danger-subtle { background-color: rgba(228, 98, 111, .16) !important; color: #C0384A !important; }
#gm-tablet .badge.bg-warning-subtle { background-color: rgba(181, 118, 17, .12) !important; color: #8A5A0D !important; }
#gm-tablet .badge.bg-info-subtle { background-color: rgba(20, 201, 177, .14) !important; color: var(--t-teal-700) !important; }
#gm-tablet .badge.bg-primary-subtle { background-color: rgba(45, 114, 217, .1) !important; color: #2D72D9 !important; }
#gm-tablet .badge.bg-secondary-subtle,
#gm-tablet .badge.bg-light { background-color: #EEF3F7 !important; color: var(--t-navy-700) !important; }

/* ------------------------------------------------------------- POS entry */
#gm-tablet .tablet-pos-status {
    border-radius: 999px;
    background: rgba(181, 118, 17, .12);
    color: #8A5A0D;
    font-weight: 600;
}

#gm-tablet .tablet-pos-status.is-locked {
    background: rgba(11, 165, 143, .14);
    color: #0B8A77;
}

#gm-tablet .tablet-pos-suggestions {
    border: 1px solid var(--t-border);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(16, 35, 63, .16);
}

#gm-tablet .tablet-pos-suggestion {
    color: var(--t-navy);
}

#gm-tablet .tablet-pos-suggestion:hover,
#gm-tablet .tablet-pos-suggestion.active {
    background: var(--t-tint);
}

#gm-tablet .tablet-pos-more {
    border-color: var(--t-border);
}

#gm-tablet .tablet-entry-step {
    background: var(--t-grad);
    color: #fff;
    font-weight: 700;
}

#gm-tablet .tablet-line-table-head {
    background: #F7FBFC;
    color: var(--t-muted);
    font-weight: 600;
}

#gm-tablet .tablet-line-list,
#gm-tablet .tablet-entry-empty {
    border-color: var(--t-border-soft);
}

#gm-tablet .tablet-line-card {
    border-color: var(--t-border-soft);
}

#gm-tablet .tablet-line-card-heading strong {
    color: var(--t-navy);
}

#gm-tablet .tablet-line-summary strong {
    color: var(--t-navy);
    font-variant-numeric: tabular-nums;
}

#gm-tablet .tablet-entry-totals small {
    color: var(--t-muted);
}

#gm-tablet .tablet-entry-totals strong {
    color: var(--t-navy);
    font-variant-numeric: tabular-nums;
}

#gm-tablet .tablet-entry-grand {
    border-top-color: var(--t-border);
}

#gm-tablet .tablet-entry-grand small {
    color: var(--t-navy);
}

#gm-tablet .tablet-entry-grand strong {
    color: var(--t-teal-700);
}

/* receipt allocations */
#gm-tablet .tablet-alloc-row {
    border: 1px solid var(--t-border);
    background: #FBFDFE;
}

#gm-tablet .tablet-alloc-row.is-allocated {
    border-color: rgba(11, 165, 143, .35);
    background: rgba(11, 165, 143, .07);
}

#gm-tablet .tablet-alloc-head,
#gm-tablet .tablet-alloc-due::before {
    color: var(--t-muted);
}

/* ------------------------------------------------- empty, loading, alerts */
#gm-tablet .tablet-empty-state,
#gm-tablet .tablet-list-page > .tablet-empty-state {
    border: 1px dashed var(--t-border);
    border-radius: 16px;
    background: #fff;
    color: var(--t-muted);
}

#gm-tablet .tablet-empty-state > i,
#gm-tablet .tablet-list-page > .tablet-empty-state > i {
    color: var(--t-teal-600);
    opacity: .7;
}

#gm-tablet .tablet-empty-state h3 {
    color: var(--t-navy);
}

#gm-tablet .tablet-dashboard-page > .tablet-loading {
    border-color: var(--t-border);
    border-radius: 16px;
}

#gm-tablet .spinner-border.text-primary {
    color: var(--t-teal-600) !important;
}

#gm-tablet .alert,
#gm-tablet-login .alert {
    border-radius: 12px;
}

/* ------------------------------------------------------------------ modal */
#gm-tablet .tablet-modal .modal-content {
    border: 1px solid var(--t-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(16, 35, 63, .22);
}

#gm-tablet .tablet-modal .modal-header,
#gm-tablet .tablet-modal .modal-footer {
    border-color: var(--t-border-soft);
}

/* ------------------------------------------------------------------ login */
#gm-tablet-login.tablet-login-page {
    background: radial-gradient(circle at 15% 10%, rgba(20, 201, 177, .12), transparent 45%), var(--t-page);
}

#gm-tablet-login .tablet-login-brand,
#gm-tablet-login .tablet-login-heading h1 {
    color: var(--t-navy);
}

#gm-tablet-login .tablet-login-company,
#gm-tablet-login .tablet-login-heading p {
    color: var(--t-muted);
}

#gm-tablet-login .tablet-login-brand-mark {
    border-radius: 12px;
    background: var(--t-grad);
    color: #fff;
    box-shadow: 0 6px 16px rgba(13, 159, 153, .28);
}

#gm-tablet-login .tablet-login-panel {
    border: 1px solid var(--t-border);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(28, 75, 98, .12);
}

#gm-tablet-login .tablet-login-icon {
    border-radius: 12px;
    background: var(--t-tint);
    color: var(--t-teal-700);
}

#gm-tablet-login .form-label {
    color: var(--t-navy);
    font-weight: 600;
}

#gm-tablet-login .form-check-input:checked {
    border-color: var(--t-teal-600);
    background-color: var(--t-teal-600);
}

#gm-tablet-login a {
    color: var(--t-teal-700);
}