/* ASLOOB Mobile-first UX enhancement. Desktop CSS and React data operations are unchanged. */
@media screen and (max-width: 767px) {
  html, body, #root { max-width: 100%; overflow-x: clip; }
  main { padding-inline: 11px !important; }
  main input, main textarea, main select { max-width: 100%; min-width: 0; }
  main button, main a { -webkit-tap-highlight-color: transparent; }
  main button:focus-visible, main a:focus-visible,
  .as-mobile-action-trigger:focus-visible, .as-native-action-bar:focus-visible {
    outline: 3px solid #60a5fa !important; outline-offset: 3px;
  }
  /* Invoice tables & other actual visible tables become a series of complete cards.
     The original td content, inputs, controls and event handlers are not removed or cloned. */
  main .as-mobile-table-shell { overflow: visible !important; width: 100%; max-width: 100%; }
  main table.as-mobile-table { display: block !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; border-collapse: separate !important; }
  main .as-mobile-table thead { display: none !important; }
  main .as-mobile-table tbody { display: flex !important; flex-direction: column; gap: 12px; padding: 11px 9px 16px; min-width: 0; width: 100%; }
  main .as-mobile-table tbody > tr.as-mobile-row {
    display: block !important; width: 100%; min-width: 0; max-width: 100%;
    position: relative; text-align: right; padding: 51px 12px 12px;
    border: 1px solid #dce4ee !important; border-radius: 17px !important;
    box-shadow: 0 2px 9px rgba(15, 23, 42, .065) !important;
    transition: border-color .15s ease; overflow: visible;
  }
  main .as-mobile-table tbody > tr.as-mobile-row:not([data-payment]):not([data-review]):not([class*="bg-green"]):not([class*="bg-orange"]):not([class*="bg-rose"]):not([class*="bg-blue"]):not([class*="bg-purple"]) {
    background-color: #fff !important;
  }
  .dark main .as-mobile-table tbody > tr.as-mobile-row:not([data-payment]):not([data-review]):not([class*="bg-green"]):not([class*="bg-orange"]):not([class*="bg-rose"]):not([class*="bg-blue"]):not([class*="bg-purple"]) {
    background-color: #141f32 !important;
  }
  main .as-mobile-table tbody > tr.as-mobile-row > td:not(.as-mobile-action-trigger),
  main .as-mobile-table tbody > tr.as-mobile-row > th {
    display: grid !important; grid-template-columns: minmax(85px, 32%) minmax(0, 1fr);
    align-items: start; column-gap: 9px; row-gap: 5px;
    min-width: 0 !important; width: 100% !important; max-width: 100% !important;
    min-height: 38px; height: auto !important;
    padding: 8px 3px !important; margin: 0 !important;
    border: 0 !important; border-bottom: 1px solid rgba(148,163,184,.19) !important;
    text-align: right !important; white-space: normal !important;
    font-size: 12px !important; overflow-wrap: anywhere;
  }
  main .as-mobile-table tbody > tr.as-mobile-row > td:not(.as-mobile-action-trigger)::before,
  main .as-mobile-table tbody > tr.as-mobile-row > th::before {
    content: attr(data-as-label); color: #64748b; font-weight: 700;
    font-size: 11px; line-height: 1.5; align-self: center; text-align: right;
  }
  .dark main .as-mobile-table tbody > tr.as-mobile-row > td:not(.as-mobile-action-trigger)::before,
  .dark main .as-mobile-table tbody > tr.as-mobile-row > th::before { color:#a3b4cc; }
  main .as-mobile-table td > * { min-width:0; max-width:100%; }
  main .as-mobile-table td .truncate { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
  main .as-mobile-table td input:not([type=checkbox]), main .as-mobile-table td textarea, main .as-mobile-table td select {
    width:100%; min-width:0 !important; max-width:100% !important; font-size:16px !important;
    min-height:38px; padding-block:7px;
  }
  main .as-mobile-table td button { min-width:32px; min-height:32px; }
  main .as-mobile-table tbody > tr.as-mobile-row > td.as-mobile-full-cell {
    display: block !important; width:100%; padding:10px 0 !important; white-space:normal !important;
  }
  main .as-mobile-table tbody > tr.as-mobile-row > td.as-mobile-action-trigger {
    display:block !important; min-width:0 !important; width:100% !important;
    height:0; padding:0 !important; margin:0 !important; border:0 !important;
    text-align:right !important; cursor:pointer; overflow:visible;
  }
  main .as-mobile-action-trigger::before {
    content:'⋯'; display:flex; align-items:center; justify-content:center;
    position:absolute; top:10px; left:11px; width:37px; height:35px;
    color:#334155; background:#f1f5f9; border:1px solid #cbd5e1;
    border-radius:11px; font-size:24px; line-height:1; font-weight:800;
  }
  .dark main .as-mobile-action-trigger::before { background:#334155; color:#f8fafc; border-color:#475569; }
  main .as-mobile-action-trigger:not(.as-open) > * { display:none !important; }
  main .as-mobile-action-trigger.as-open {
    height:auto; padding:10px 5px !important; margin-top:8px !important;
    border-top:1px solid #cbd5e1 !important;
  }
  main .as-mobile-action-trigger.as-open > * { display:flex !important; flex-wrap:wrap; justify-content:flex-start; gap:7px; }
  main .as-mobile-action-trigger.as-open button { min-width:38px; min-height:38px; }
  main .as-mobile-action-trigger.as-open::before { background:#dbeafe; color:#1d4ed8; }
  main .as-mobile-table tr.as-mobile-row.as-open { z-index:2; }
  /* Existing native mobile expense cards are kept, but receive the same 3-dot action UX. */
  main .as-native-mobile-card {
    position:relative; padding:15px 13px 56px !important;
    border-radius:17px !important; box-shadow:0 3px 11px rgba(15,23,42,.07) !important;
    max-width:100%; min-width:0;
  }
  main .as-native-mobile-card h4 { line-height:1.55; overflow-wrap:anywhere; }
  main .as-native-action-bar { cursor:pointer; min-height:0; border-top:0 !important; padding:0 !important; }
  main .as-native-action-bar::before {
    content:'⋯'; position:absolute; bottom:12px; left:12px;
    display:flex; align-items:center; justify-content:center;
    width:38px; height:36px; border-radius:10px;
    background:#edf2fa; border:1px solid #cbd5e1; color:#334155;
    font-size:23px; font-weight:800;
  }
  .dark main .as-native-action-bar::before { background:#334155; border-color:#475569; color:#f1f5f9; }
  main .as-native-action-bar:not(.as-open) > * { display:none !important; }
  main .as-native-action-bar.as-open {
    display:flex !important; gap:8px !important; flex-wrap:wrap;
    padding-top:12px !important; margin-top:10px !important;
    border-top:1px solid #cbd5e1 !important;
  }
  main .as-native-action-bar.as-open > * { display:flex !important; flex-wrap:wrap; gap:8px; }
  main .as-native-action-bar.as-open button { min-height:38px; min-width:38px; }
  main .as-native-action-bar.as-open::before { background:#dbeafe; color:#1d4ed8; }
  main .overflow-x-auto:not(.as-mobile-table-shell) { max-width:100%; }
  /* Do not let fixed controls overlap card content; small-screen improvement. */
  main [class*="min-w-[950px]"] { max-width:100%; }
}
@media print { .as-mobile-action-trigger::before, .as-native-action-bar::before { content:none !important; } }

@media screen and (max-width: 767px) {
  main .as-mobile-table tbody > tr.as-mobile-row[data-payment="paid"] { background-color: #14533e !important; }
  main .as-mobile-table tbody > tr.as-mobile-row[data-review="review"]:not([data-payment="paid"]) { background-color: #c75b16 !important; }
  main .as-mobile-table tbody > tr.as-mobile-row:is([data-payment="paid"], [data-review="review"]) > td::before { color: #fff !important; }
  main .as-mobile-table tbody > tr.as-mobile-row:has(td[data-invoice-actions]) { padding-block-start: 12px; }
  main .as-mobile-table tbody > tr.as-mobile-row > td[data-invoice-actions] { display: block !important; }
  main .as-mobile-table tbody > tr.as-mobile-row > td[data-invoice-actions]::before { content: none; }
  main .as-mobile-table td[data-invoice-actions] > div {
    display: flex !important; flex-wrap: wrap; justify-content: flex-start; gap: 6px;
  }
  main .as-mobile-table td[data-invoice-actions] button { min-width: 44px; min-height: 44px; }
}

@media screen and (max-width: 767px) {
  main .as-mobile-table td .as-touch-reorder { min-width: 44px; min-height: 44px; }
  main .as-mobile-table td .as-touch-reorder:disabled { opacity: .45; }
}

@media screen and (max-width: 767px) {
  main .as-mobile-table tbody > tr.as-mobile-row > td[data-invoice-actions] > div {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    gap: 6px;
  }
  main .as-mobile-table td[data-invoice-actions] .as-payment-message { grid-column: 1 / -1; }
}

/* Invoice register: the same compact card structure for every normal row. */
@media screen and (min-width: 768px) {
  .as-invoice-mobile-summary { display: none !important; }
  .as-invoice-action-menu > .as-invoice-actions-trigger { display: none !important; }
  .as-invoice-action-menu > .as-mobile-reorder { display: none; }
}
@media screen and (max-width: 767px) {
  main .as-mobile-table tbody > tr.as-mobile-row[data-invoice-card] {
    display: grid !important; grid-template-columns: minmax(0, 1fr);
    gap: 10px; padding: 14px 12px 12px !important;
  }
  main .as-mobile-table tbody > tr.as-mobile-row[data-invoice-card] > td {
    display: block !important; padding: 0 !important; border: 0 !important;
    min-height: 0 !important; max-width: 100% !important;
  }
  main .as-mobile-table tbody > tr.as-mobile-row[data-invoice-card] > td::before { content: none !important; }
  main .as-mobile-table tbody > tr.as-mobile-row[data-invoice-card] > td:nth-child(n+2):nth-child(-n+5),
  main .as-mobile-table tbody > tr.as-mobile-row[data-invoice-card] > td:nth-child(7) { display: none !important; }
  .as-invoice-mobile-summary { position: relative; min-height: 95px !important; }
  .as-invoice-mobile-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-left: 96px; }
  .as-invoice-mobile-serial, .as-invoice-mobile-service {
    border: 1px solid #bfdbfe; border-radius: 5px; padding: 2px 5px;
    background: #eff6ff; color: #1e40af; font-size: 11px; font-weight: 700; overflow-wrap: anywhere;
  }
  .as-invoice-mobile-date { color: #64748b; font-size: 10px; }
  .as-invoice-mobile-client { font-size: 15px; font-weight: 800; padding-left: 96px; margin-top: 5px; overflow-wrap: anywhere; }
  .as-invoice-mobile-money { position: absolute; left: 0; top: 0; max-width: 94px; text-align: left; line-height: 1.3; overflow-wrap: anywhere; }
  .as-invoice-mobile-money strong { font-size: 18px; font-weight: 900; }
  .as-invoice-mobile-money small { font-size: 10px; color: #64748b; }
  .as-invoice-mobile-money b { font-size: 12px; }
  .as-invoice-mobile-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
  .as-invoice-mobile-badges > span { padding: 5px 10px; border-radius: 9px; font-size: 11px; font-weight: 700; }
  main .as-mobile-table tr.as-mobile-row[data-invoice-card] > td:nth-child(6) > div { align-items: stretch; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  main .as-mobile-table tr.as-mobile-row[data-invoice-card] > td:nth-child(6) > div > div { flex-direction: row; flex-wrap: wrap; width: auto; }
  main .as-mobile-table tr.as-mobile-row[data-invoice-card] > td:nth-child(6) span { text-align: right; overflow-wrap: anywhere; }
  main .as-mobile-table tr.as-mobile-row[data-invoice-card] > td:nth-child(6) button { min-height: 28px; font-size: 10px; padding: 2px 6px; }
  main .as-mobile-table tr.as-mobile-row[data-invoice-card] > td:nth-child(8) { text-align: right !important; }
  main .as-mobile-table tr.as-mobile-row[data-invoice-card] > td:nth-child(8) > span { margin: 0; text-align: right; }
  .as-invoice-action-menu { text-align: left; }
  .as-invoice-action-menu > .as-invoice-actions-trigger { display: inline-flex; padding: 5px 12px; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; color: #334155; font-size: 11px; font-weight: 700; cursor: pointer; list-style: none; }
  .as-invoice-action-menu > .as-invoice-actions-trigger::-webkit-details-marker { display: none; }
  .as-invoice-action-menu:not([data-open="true"]) > div { display: none !important; }
  .as-invoice-action-menu[data-open="true"] > div { display: flex !important; flex-wrap: wrap; margin-top: 8px; gap: 6px; }
  main .as-mobile-table td[data-invoice-actions] .as-invoice-action-menu button { min-height: 36px; }
  /* Remove exactly the two circled controls from the mobile register, including its menu. */
  main .as-mobile-table td[data-invoice-actions] .as-desktop-invoice-state { display: none !important; }
  main .as-mobile-table tr.as-mobile-row[data-invoice-card][data-completed="true"]:not([data-payment]):not([data-review]) { background-color: #7bf1a8 !important; }
  .dark .as-invoice-mobile-summary { color: #f1f5f9; }
  .dark .as-invoice-action-menu > .as-invoice-actions-trigger { background: #1e293b; color: #f1f5f9; border-color: #475569; }
}

@media screen and (max-width: 767px) {
  main .as-mobile-table tr.as-mobile-row[data-invoice-card] > td[data-invoice-actions] > .as-invoice-action-menu { display: block !important; }
  main .as-mobile-table tr.as-mobile-row[data-invoice-card] .as-invoice-mobile-heading { display: flex; }
}
@media print { .as-invoice-mobile-summary, .as-invoice-actions-trigger, .as-mobile-reorder { display: none !important; } }

@media screen and (max-width: 767px) {
  main .as-mobile-table tr.as-mobile-row[data-invoice-card] .as-invoice-actions-trigger { color: #334155 !important; }
  main .as-mobile-table tr.as-mobile-row[data-invoice-card] .as-invoice-mobile-heading > :is(.as-invoice-mobile-serial, .as-invoice-mobile-service) { color: #1e40af !important; }
}
@media screen and (max-width: 767px) {
  .dark main .as-mobile-table tr.as-mobile-row[data-invoice-card] .as-invoice-actions-trigger { color: #f1f5f9 !important; }
}