/*
 * SGAS Estimate — Premium UI Phase 2 (screen-only).
 *
 * Intentional scope: bill entry, bills list, customer/product management,
 * payment collections and reports. No HTML/JS/PHP changes, no print rules,
 * no changes to grid structure or dynamic visibility of search suggestions,
 * tabs, menus, modals, alerts or validation states.
 *
 * Loaded after premium-phase1.css and before mobile-readability.css.
 */

@media screen {
  /* Unified visual language across transactional screens. */
  :is(.page-new_bill, .page-bills, .page-payments, .page-customers,
      .page-products, .page-reports) .wrap {
    --p2-ink: #173c2b;
    --p2-muted: #687d70;
    --p2-line: #dce9e0;
    --p2-soft: #f5faf7;
    --p2-shadow: 0 3px 12px rgba(12, 55, 35, .035), 0 15px 42px rgba(12, 55, 35, .05);
  }
  :is(.page-new_bill, .page-bills, .page-payments, .page-customers,
      .page-products, .page-reports) .wrap :is(h1, h2) {
    color: var(--p2-ink);
    letter-spacing: -.55px;
    line-height: 1.26;
  }
  :is(.page-new_bill, .page-bills, .page-payments, .page-customers,
      .page-products, .page-reports) .wrap .card {
    border-color: var(--p2-line);
    box-shadow: var(--p2-shadow);
  }
  :is(.page-new_bill, .page-bills, .page-payments, .page-customers,
      .page-products, .page-reports) :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]) {
    border-color: #cadbd0;
    border-radius: 10px;
    background-color: #fff;
    color: #203f30;
    transition: border-color .16s ease, box-shadow .16s ease;
  }
  :is(.page-new_bill, .page-bills, .page-payments, .page-customers,
      .page-products, .page-reports) :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):focus-visible {
    border-color: #29945c;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(41, 148, 92, .14);
  }
  :is(.page-new_bill, .page-bills, .page-payments, .page-customers,
      .page-products, .page-reports) :is(input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: .66;
  }
  :is(.page-bills, .page-payments, .page-customers, .page-products, .page-reports)
  :is(.bills-table, .payment-table, .customer-table, .product-table, .report-table-wrap table) {
    font-variant-numeric: tabular-nums;
  }

  /* Bill list: familiar controls, more legible financial summary. */
  .page-bills .bills-page-head,
  .page-customers .customers-page-head,
  .page-products .products-page-head,
  .page-reports .reports-heading {
    margin-bottom: 22px;
  }
  .page-bills .bills-page-head h1,
  .page-customers .customers-page-head h1,
  .page-products .products-page-head h1,
  .page-reports .reports-heading h1,
  .page-payments .payments-head h1,
  .page-new_bill .page-heading h1 {
    font-weight: 800;
    letter-spacing: -.9px;
  }
  .page-bills .bills-kicker,
  .page-payments .payments-kicker,
  .page-reports .reports-kicker {
    color: #258755;
    letter-spacing: 1.45px;
  }
  .page-bills .bills-stats,
  .page-payments .payment-stats {
    gap: 14px;
    margin-bottom: 18px;
  }
  .page-bills .bills-stat,
  .page-payments .payment-stat {
    min-height: 104px;
    padding: 19px 21px;
    border: 1px solid var(--p2-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--p2-shadow);
  }
  .page-bills .bills-stat small,
  .page-payments .payment-stat small {
    color: var(--p2-muted);
    font-size: 11px;
    font-weight: 680;
    letter-spacing: .08px;
  }
  .page-bills .bills-stat b,
  .page-payments .payment-stat b {
    margin-top: 10px;
    font-size: clamp(21px, 2vw, 27px);
    line-height: 1.14;
    letter-spacing: -.65px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .page-bills .bills-stat {
    border-top: 3px solid #43a879;
  }
  .page-bills .bills-stat:nth-child(2) { border-top-color: #6993bf; }
  .page-bills .bills-stat:nth-child(3) { border-top-color: #d5a54e; }
  .page-bills .bills-workspace {
    border-radius: 16px;
  }
  .page-bills .bills-filters {
    padding: 20px;
    gap: 12px;
    background: linear-gradient(180deg, #fcfefd, #f7fbf8);
    border-bottom-color: var(--p2-line);
  }
  .page-bills .bills-filters label,
  .page-customers .customer-form label,
  .page-products .product-form label,
  .page-reports .report-filter label,
  .page-new_bill .bill-form label {
    color: #395a47;
    font-weight: 750;
  }
  .page-bills .bills-filters :is(input, button, .btn) { min-height: 44px; }
  .page-bills .bills-list-head {
    padding: 20px 21px 15px;
    gap: 15px;
  }
  .page-bills .bills-list-head h2 { font-size: 18px; }
  .page-bills .bills-list-head p { color: var(--p2-muted); }
  .page-bills .bills-table th,
  .page-customers .customer-table th,
  .page-products .product-table th,
  .page-payments .payment-table th,
  .page-reports .report-table-wrap th {
    background: #f3f8f5;
    color: #5e7567;
    font-weight: 800;
    letter-spacing: .48px;
  }
  .page-bills .bills-table td,
  .page-customers .customer-table td,
  .page-products .product-table td,
  .page-payments .payment-table td,
  .page-reports .report-table-wrap td {
    border-bottom-color: #e7eee9;
  }
  .page-bills .bills-number { color: #167348; }
  .page-bills .bills-customer b { color: #244636; }
  .page-bills .bills-due,
  .page-customers .customer-balance.due,
  .page-reports .balance-positive { color: #a7443a; }
  .page-bills .bills-row-actions .btn,
  .page-customers .customer-row-actions .btn,
  .page-products .product-edit-btn,
  .page-payments .payment-row-actions .btn,
  .page-reports .report-actions .btn {
    border-radius: 9px;
    box-shadow: none;
  }

  /* New/edit bill: screen entry only. A5 print template stays untouched. */
  .page-new_bill .page-heading {
    margin-bottom: 20px;
  }
  .page-new_bill .bill-form {
    border-radius: 16px;
    border-color: var(--p2-line);
    box-shadow: var(--p2-shadow);
  }
  .page-new_bill .bill-top {
    border-bottom-color: var(--p2-line);
    background: linear-gradient(180deg, #fff 0%, #fcfefd 100%);
  }
  .page-new_bill .customer-details {
    border-color: #d3e6d9;
    border-radius: 13px;
    background: #f2faf5;
  }
  .page-new_bill .customer-avatar {
    border-radius: 13px;
    background: #e1f2e7;
    color: #19744a;
  }
  .page-new_bill .bill-info-stack {
    border-left-color: var(--p2-line);
  }
  .page-new_bill .bill-info-stack > div {
    border-color: var(--p2-line);
    border-radius: 11px;
    background: #f9fcfa;
  }
  .page-new_bill .bill-info-stack b {
    color: var(--p2-ink);
    font-variant-numeric: tabular-nums;
  }
  .page-new_bill .products-heading {
    border-bottom-color: var(--p2-line);
  }
  .page-new_bill .products-heading h2 { font-weight: 800; }
  .page-new_bill .items-table-head {
    color: #587062;
    letter-spacing: .58px;
  }
  .page-new_bill .item-row:not(.row-error) {
    border-color: #dae8df;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(10, 63, 38, .035);
  }
  .page-new_bill .item-row :is(.numeric, .amount) {
    font-variant-numeric: tabular-nums;
  }
  .page-new_bill .item-row .amount[readonly] {
    background-color: #eff7f2;
    border-color: #d5e8dc;
    color: #165e3b;
    font-weight: 800;
  }
  .page-new_bill .bill-footer {
    border-top-color: var(--p2-line);
  }
  .page-new_bill .bill-summary > div {
    border: 1px solid #dfeae3;
    border-radius: 12px;
    background: #f7faf8;
  }
  .page-new_bill .bill-summary .closing-box {
    background: #eaf7ee;
    border-color: #c8e4d1;
  }
  .page-new_bill .bill-summary b,
  .page-new_bill .bill-footer .total span {
    color: #155e3b;
    font-variant-numeric: tabular-nums;
  }
  .page-new_bill .bill-summary .closing-box b {
    color: #105e3b;
  }
  .page-new_bill :is(.customer-suggestions, .product-cell .suggestions) {
    border: 1px solid #c7dfd0;
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(13, 62, 39, .12);
  }
  .page-new_bill .price-popup-card {
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(8, 48, 30, .12);
  }

  /* Receive Payment: clearer balances while retaining advances and search. */
  .page-payments .payments-head { margin-bottom: 20px; }
  .page-payments .payment-stat { gap: 13px; }
  .page-payments .payment-stat-icon {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 12px;
  }
  .page-payments .payment-stat.outstanding {
    border-color: #ecdfbf;
    background: #fffaf2;
  }
  .page-payments .payment-entry,
  .page-payments .payment-history {
    border-radius: 16px;
    box-shadow: var(--p2-shadow);
  }
  .page-payments .payment-section-head {
    padding: 18px 20px;
    border-bottom-color: var(--p2-line);
    background: #fcfefd;
    border-radius: 15px 15px 0 0;
  }
  .page-payments .payment-section-head h2 { font-weight: 800; }
  .page-payments .payment-form { padding: 18px 20px 22px; }
  .page-payments .payment-form label {
    color: #395947;
    font-weight: 750;
  }
  .page-payments .payment-form .payment-display-box {
    border-color: #d5e5d9;
    border-radius: 10px;
    background: #f6faf7;
  }
  .page-payments .payment-form .payment-display-box b {
    color: #1d5137;
    font-variant-numeric: tabular-nums;
  }
  .page-payments .payment-form .payment-receipt-box {
    background: #ecf8f0 !important;
    border-color: #c6e6d1 !important;
  }
  .page-payments .payment-customer-options {
    border-color: #c8ddcf;
    border-radius: 12px;
    box-shadow: 0 16px 42px rgba(12, 60, 35, .16);
  }
  .page-payments .payment-filters {
    background: #fcfefd;
  }

  /* Customers: calm summary, clear identity and status. */
  .page-customers .customer-summary,
  .page-products .product-mini-stats { gap: 11px; }
  .page-customers .customer-summary-card,
  .page-products .product-mini-stat {
    min-width: 112px;
    padding: 13px 15px;
    border-color: #dce9e0;
    border-radius: 13px;
    box-shadow: 0 3px 10px rgba(12, 55, 35, .035);
    text-align: left;
  }
  .page-customers .customer-summary-card small,
  .page-products .product-mini-stat small {
    color: var(--p2-muted);
    font-size: 10px;
    letter-spacing: .4px;
  }
  .page-customers .customer-summary-card b,
  .page-products .product-mini-stat b {
    margin-top: 8px;
    color: #1a6a43;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
  }
  .page-customers .customer-editor,
  .page-customers .customer-list-card,
  .page-products .product-editor,
  .page-products .product-list-card {
    padding: 21px 22px;
    border-radius: 16px;
  }
  .page-customers .customer-editor-head,
  .page-products .product-editor-head {
    margin-bottom: 17px;
  }
  .page-customers .customer-editor-head h2,
  .page-products .product-editor-head h2,
  .page-customers .customer-toolbar h2 {
    color: var(--p2-ink);
    font-weight: 800;
  }
  .page-customers .customer-form,
  .page-products .product-form { gap: 13px; }
  .page-customers .customer-form :is(input:not([type="hidden"]), textarea),
  .page-products .product-form :is(input:not([type="hidden"]), select) {
    min-height: 43px;
  }
  .page-customers .customer-toolbar,
  .page-products .product-toolbar {
    margin-bottom: 17px;
  }
  .page-customers .customer-toolbar input,
  .page-products .product-toolbar input {
    min-height: 44px;
    background-color: #fbfefc;
  }
  .page-customers .customer-identity b,
  .page-products .product-name b {
    color: #214334;
    font-weight: 750;
  }
  .page-customers .customer-identity small,
  .page-products .product-name small {
    color: #75877b;
  }
  .page-customers .customer-whatsapp-status,
  .page-products .product-status {
    padding: 5px 9px;
    border-radius: 999px;
    font-weight: 800;
  }
  .page-customers .customer-whatsapp-status.ready,
  .page-products .product-status.active {
    border: 1px solid #c8e8d5;
    background: #eaf8ee;
    color: #137447;
  }
  .page-customers .customer-whatsapp-status.missing {
    border: 1px solid #f1dece;
    background: #fff3e9;
  }
  .page-products .product-status.inactive {
    border: 1px solid #e0e6e1;
    background: #f4f5f4;
    color: #586d5f;
  }
  .page-products .product-row-inactive { opacity: .77; }
  .page-products .product-pagination {
    border-top-color: var(--p2-line);
  }
  .page-products .product-edit-dialog {
    border: 1px solid #dce8df;
    border-radius: 17px;
    box-shadow: 0 25px 65px rgba(6, 40, 25, .2);
  }

  /* Reports: focused tabs and sharper financial reading hierarchy. */
  .page-reports .report-filter {
    gap: 13px;
    padding: 18px 20px;
  }
  .page-reports .report-tabs { gap: 14px; margin-bottom: 19px; }
  .page-reports .report-tab {
    border-color: #dae9df;
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--p2-shadow);
  }
  .page-reports .report-tab.active {
    border-color: #56ae7b;
    background: linear-gradient(135deg, #f1fbf5, #fff);
    box-shadow: 0 6px 22px rgba(16, 105, 62, .11), inset 0 0 0 1px #56ae7b;
  }
  .page-reports .report-tab-icon {
    border-radius: 12px;
    background: #e9f6ed;
  }
  .page-reports .report-tab b {
    color: #244636;
    font-weight: 800;
  }
  .page-reports .report-tab strong { color: #137249; }
  .page-reports .report-summary { gap: 14px; }
  .page-reports .report-summary .card {
    padding: 19px 20px;
    border-radius: 14px;
  }
  .page-reports .report-summary small {
    color: var(--p2-muted);
    letter-spacing: .55px;
  }
  .page-reports .report-summary b {
    color: #145f3d;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .page-reports .report-section {
    border-radius: 16px;
  }
  .page-reports .report-section-head h2 { font-weight: 800; }
  .page-reports .report-section-head p { color: var(--p2-muted); }
  .page-reports .report-status.ready {
    border: 1px solid #cde8d4;
    background: #eaf8ef;
  }
  .page-reports .report-status.missing {
    border: 1px solid #f0dfd0;
    background: #fff4ea;
  }
}

/* Do not rely on hover to reveal controls, especially on Android. */
@media screen and (hover: hover) {
  :is(.page-bills .bills-table, .page-customers .customer-table,
      .page-products .product-table, .page-payments .payment-table,
      .page-reports .report-table-wrap table) tbody tr:hover {
    background-color: #f6fbf8;
  }
  .page-new_bill .item-row:not(.row-error):hover {
    border-color: #bbddc7;
    box-shadow: 0 5px 18px rgba(13, 68, 42, .065);
  }
  .page-reports .report-tab:hover:not(.active) {
    border-color: #a6cfb6;
    background: #f9fcfa;
  }
}

/* Only visual tweaks at smaller widths: original grid/stacking rules win. */
@media screen and (max-width: 900px) {
  .page-new_bill .bill-top {
    background: #fff;
  }
  .page-new_bill .bill-info-stack {
    border-left-color: transparent;
  }
  .page-bills .bills-filters,
  .page-payments .payment-form,
  .page-reports .report-filter {
    padding: 15px;
  }
  .page-customers .customer-editor,
  .page-customers .customer-list-card,
  .page-products .product-editor,
  .page-products .product-list-card {
    padding: 16px;
  }
}

@media screen and (max-width: 700px) {
  :is(.page-bills .bills-stats, .page-payments .payment-stats) { gap: 8px; }
  .page-bills .bills-stat,
  .page-payments .payment-stat {
    min-height: 86px;
    padding: 12px;
    border-radius: 12px;
  }
  .page-bills .bills-stat b,
  .page-payments .payment-stat b {
    margin-top: 6px;
    font-size: 19px;
  }
  .page-bills .bills-page-head,
  .page-customers .customers-page-head,
  .page-products .products-page-head,
  .page-reports .reports-heading {
    margin-bottom: 15px;
  }
  .page-new_bill .page-heading { margin-bottom: 15px; }
  .page-new_bill .bill-summary > div { border-radius: 10px; }
  .page-customers .customer-summary-card,
  .page-products .product-mini-stat {
    min-width: 0;
    padding: 10px;
    border-radius: 11px;
  }
  .page-customers .customer-summary-card b,
  .page-products .product-mini-stat b {
    font-size: 18px;
  }
  .page-reports .report-tab { border-radius: 12px; }
  .page-reports .report-summary .card { padding: 14px; }
}

@media screen and (prefers-reduced-motion: reduce) {
  :is(.page-new_bill, .page-bills, .page-payments, .page-customers,
      .page-products, .page-reports) :is(input, select, textarea) {
    transition: none !important;
  }
}