/* Shared styles for content rendered inside AppShellLayout (Dashboard, master screens, etc.) -
   global (not CSS-isolated) because the same card/table/button/badge vocabulary is reused across
   every screen built inside the shell, not just one page. */

.master-page { display: flex; flex-direction: column; gap: 0; }
.master-page .card { margin-bottom: 0; }
.actions { white-space: nowrap; }

.page-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.page-heading h1 { margin: 0 0 4px; font-size: 21px; font-weight: 800; color: #16294E; }
.page-heading p { margin: 0; font-size: 13.5px; color: #4C5D7D; }

.card {
    background: #fff;
    border: 1px solid #E5E9F1;
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(22, 41, 78, 0.04);
    /* Data tables use table-layout:fixed with percentage-width columns, which just squashes
       text illegibly on a narrow phone rather than reflowing sensibly - scroll horizontally
       within the card instead of letting the whole page overflow. Harmless for cards whose
       content already fits. */
    overflow-x: auto;
}
.card-title { font-size: 14px; font-weight: 700; color: #16294E; margin-bottom: 14px; }

.empty-state { padding: 28px 0; text-align: center; color: #B7C2D6; font-size: 13px; }
.empty-state.error { color: #DC2626; }

.data-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.data-table th {
    text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: #7A8AA6; font-weight: 700; padding: 0 8px 8px; border-bottom: 1px solid #E5E9F1;
}
.data-table td { padding: 9px 8px; border-bottom: 1px solid #F1F3F9; color: #2D3B57; }
.data-table tr:last-child td { border-bottom: none; }
.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table th.center, .data-table td.center { text-align: center; }
.data-table tr.row-inactive td { color: #B7C2D6; }

/* Inputs inside editable/picker tables. Global fallback so shared modals (pickers) and pages without a
   scoped stylesheet don't render bare browser inputs. Page-level scoped rules (e.g. .sales-item-table)
   have higher specificity and still win where they exist. */
.series-table td { vertical-align: middle; }
.series-table input[type="text"],
.series-table input[type="number"],
.series-table input[type="date"],
.series-table select {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px;
    padding: 6px 8px; border: 1px solid #E5E9F1; border-radius: 6px;
    color: #16294E; background: #fff;
}
.series-table input:focus, .series-table select:focus { outline: none; border-color: #F5891F; }
.series-table input:disabled, .series-table select:disabled { background: #F7F9FC; color: #94A1B8; }
.series-table td.num input[type="number"] { text-align: right; }
.series-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: #F5891F; }
.modal-body .form-actions { margin-top: 16px; }

.btn-primary {
    border: none; border-radius: 8px; padding: 9px 18px; font-size: 13.5px; font-weight: 700;
    color: #fff; background: #F5891F; cursor: pointer;
}
.btn-primary:hover { background: #E07A15; }
.btn-primary:disabled { background: #E5C39A; cursor: default; }

.btn-secondary {
    border: 1px solid #E5E9F1; border-radius: 8px; padding: 9px 18px; font-size: 13.5px;
    font-weight: 600; color: #4C5D7D; background: #fff; cursor: pointer;
}
.btn-secondary:hover { background: #F7F9FC; }

.btn-danger { background: #DC2626 !important; }
.btn-danger:hover { background: #B91C1C !important; }

.actions-btn-group { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.btn-chip {
    border: 1px solid #E5E9F1; border-radius: 6px; padding: 4px 10px; font-size: 12px;
    font-weight: 600; color: #4C5D7D; background: #fff; cursor: pointer; white-space: nowrap;
}
.btn-chip:hover { background: #F7F9FC; border-color: #D7DEEA; color: #16294E; }
.btn-chip.danger { color: #DC2626; border-color: #F3C6C6; }
.btn-chip.danger:hover { background: #FDECEC; border-color: #DC2626; }

.link-btn {
    border: none; background: none; color: #1E6091; font-size: 12.5px; font-weight: 600;
    cursor: pointer; padding: 0; margin-right: 12px;
}
.link-btn:last-child { margin-right: 0; }
.link-btn:hover { color: #F5891F; }

.status-badge {
    font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
    display: inline-block;
}
.status-badge.active { color: #22C55E; background: #E7F8EE; }
.status-badge.inactive { color: #7A8AA6; background: #F1F3F9; }
.status-badge.delivered { color: #16A34A; background: #E7F8EE; }
.status-badge.part-delivered { color: #D97706; background: #FEF3E2; }
.status-badge.in-stock { color: #2563EB; background: #E8F0FE; }

.form-card { margin-bottom: 16px; }
.form-error {
    color: #DC2626; background: #FDECEC; border-radius: 8px; padding: 8px 12px;
    font-size: 13px; margin-bottom: 14px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 18px;
    margin-bottom: 18px;
}
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: span 3; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: #4C5D7D; }
.form-grid input, .form-grid select {
    font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid #E5E9F1;
    border-radius: 8px; color: #16294E; background: #fff;
}
.form-grid input:focus, .form-grid select:focus { outline: none; border-color: #F5891F; }
.form-grid .dp-wrapper, .form-grid .dp-input { width: 100%; box-sizing: border-box; }

.form-actions { display: flex; gap: 10px; }

.checkbox-label {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; }

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-grid .span-2, .form-grid .span-3 { grid-column: span 1; }
}

@media (min-width: 760px) {
    .form-grid.form-grid-wide { grid-template-columns: repeat(3, 1fr); }
}

/* Grid toolbar: global search + Print/Export/Add, sits above the data table. */
.grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.grid-search {
    flex: 1;
    min-width: 200px;
    max-width: 360px;
    font: inherit;
    font-size: 13.5px;
    padding: 8px 12px;
    border: 1px solid #E5E9F1;
    border-radius: 8px;
    color: #16294E;
    background: #fff;
}
.grid-search:focus { outline: none; border-color: #F5891F; }
.grid-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Standard Filter Card: a separate card above the grid card, used by every transaction/report
   screen. Reports can carry many filter fields, so it needs its own wrapping row rather than
   competing for space inside the grid's toolbar - and it never auto-fetches on field change,
   only when "Get Data" is pressed.
   overflow must stay visible (unlike the base .card's overflow-x:auto) or the DatePicker's
   absolutely-positioned calendar popup gets clipped by the card's own scroll box. */
.master-page .filter-card { margin-bottom: 20px; overflow: visible; }
.filter-card-fields {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 14px 18px;
}
.filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.filter-field-label { font-size: 12.5px; font-weight: 600; color: #4C5D7D; }
.filter-field-action { min-width: 0; }
/* Global fallback for plain selects/inputs in the filter card (pages with scoped rules still win). */
.filter-field select,
.filter-field input[type="text"],
.filter-field input[type="number"] {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
    padding: 8px 10px; border: 1px solid #E5E9F1; border-radius: 8px;
    color: #16294E; background: #fff;
}
.filter-field select:focus, .filter-field input[type="text"]:focus, .filter-field input[type="number"]:focus {
    outline: none; border-color: #F5891F;
}
.filter-get-btn { white-space: nowrap; }
.filter-text-input {
    font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid #E5E9F1;
    border-radius: 8px; color: #16294E; background: #fff; box-sizing: border-box;
}
.filter-text-input:focus { outline: none; border-color: #F5891F; }

@media (max-width: 640px) {
    .filter-card-fields { flex-direction: column; align-items: stretch; }
    .filter-field { min-width: 0; }
    .filter-get-btn { width: 100%; }
}

.btn-tool {
    border: 1px solid #E5E9F1; border-radius: 8px; padding: 8px 14px; font-size: 13px;
    font-weight: 600; color: #4C5D7D; background: #fff; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.btn-tool:hover { background: #F7F9FC; border-color: #D7DEEA; }

/* Per-column filter row, rendered as a second row inside <thead>. */
.data-table .filter-row th { padding: 0 8px 8px; border-bottom: 1px solid #E5E9F1; vertical-align: top; }
.data-table .filter-row input, .data-table .filter-row select {
    display: block; width: 100%; height: 30px; box-sizing: border-box; font: inherit; font-size: 12.5px;
    padding: 5px 8px; border: 1px solid #E5E9F1; border-radius: 6px;
    color: #16294E; background: #FBFCFE;
}
.data-table .filter-row input:focus, .data-table .filter-row select:focus {
    outline: none; border-color: #F5891F; background: #fff;
}
.data-table .filter-row select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 24px; padding-left: 24px; text-align: center; text-align-last: center; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237A8AA6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px 6px;
}

/* Modal (Add/Edit dialogs, confirmations) */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(22, 41, 78, 0.45);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 5vh 16px; z-index: 1000; overflow-y: auto;
}
.modal-dialog {
    background: #fff; border-radius: 14px; width: 100%; max-width: 640px;
    box-shadow: 0 20px 50px rgba(22, 41, 78, 0.25);
    max-height: 90vh; display: flex; flex-direction: column;
}
.modal-dialog-wide { max-width: 1040px; }

/* Pagination - shared across every master grid's data-table. */
.pagination {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 4px 4px; flex-wrap: wrap;
}
.pagination-info { font-size: 12.5px; color: #7A8AA6; }
.pagination-controls { display: flex; align-items: center; gap: 6px; }
.pagination-controls select {
    font: inherit; font-size: 12.5px; padding: 6px 8px; border: 1px solid #E5E9F1;
    border-radius: 7px; color: #16294E; background: #fff;
}
.pagination-controls .btn-chip.page-num.active { background: #16294E; color: #fff; }
.pagination-controls .btn-chip:disabled { opacity: 0.4; cursor: default; }
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid #E5E9F1;
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #16294E; }
.modal-close {
    border: none; background: none; font-size: 22px; line-height: 1; color: #7A8AA6;
    cursor: pointer; padding: 0 4px;
}
.modal-close:hover { color: #16294E; }
.modal-body { padding: 22px; overflow-y: auto; }

/* Print Manager dialog */
.print-template-hint { margin: 0 0 14px; font-size: 12.5px; color: #4C5D7D; }
.print-template-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.print-template-option {
    position: relative; display: flex; align-items: center; gap: 12px;
    border: 1.5px solid #E5E9F1; border-radius: 11px; padding: 11px 14px; cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.print-template-option:hover { border-color: #C9D3E6; }
.print-template-option input { position: absolute; opacity: 0; pointer-events: none; }
.print-template-option.selected { border-color: #F5891F; background: #FDF1E4; }
.print-template-radio {
    flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #E5E9F1;
    background: #fff; display: flex; align-items: center; justify-content: center;
    transition: border-color .15s ease;
}
.print-template-radio::after {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F5891F;
    transform: scale(0); transition: transform .15s ease;
}
.print-template-option.selected .print-template-radio { border-color: #F5891F; }
.print-template-option.selected .print-template-radio::after { transform: scale(1); }
.print-template-name { font-size: 13.5px; font-weight: 700; color: #16294E; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.print-template-default {
    font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #F5891F;
    background: rgba(245, 137, 31, 0.14); padding: 2px 7px; border-radius: 999px; line-height: 1.5;
}
.print-template-actions { display: flex; gap: 10px; }
.print-template-actions .btn-print,
.print-template-actions .btn-whatsapp,
.print-template-actions .btn-secondary { flex: 1; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 700; }
.print-template-actions .btn-secondary { flex: none; padding: 10px 16px; }
.btn-print { border: none; color: #fff; background: #F5891F; cursor: pointer; }
.btn-print:hover { background: #E07A15; }
.btn-print:disabled { background: #E5C39A; cursor: default; }
.btn-whatsapp { border: none; color: #fff; background: #22B24C; cursor: pointer; }
.btn-whatsapp:hover { background: #1D9B41; }
.btn-whatsapp:disabled { background: #A9D9B8; cursor: default; }
.print-template-loading {
    display: flex; align-items: center; gap: 10px; padding: 26px 0 18px;
    color: #4C5D7D; font-size: 13px; justify-content: center;
}
.print-template-spinner {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid #F1D9BC; border-top-color: #F5891F;
    animation: print-template-spin .8s linear infinite;
}
@keyframes print-template-spin { to { transform: rotate(360deg); } }

@media print {
    .shell-header, .shell-nav, .shell-footer, .no-print { display: none !important; }
    .shell-main { padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; padding: 0 !important; }
}

/* Confirmation dialog (Delete, etc.) - centered icon/title/message layout, distinct from the
   left-aligned form Modal. */
.confirm-dialog { max-width: 420px; text-align: center; padding: 32px 28px 28px; }
.confirm-icon {
    width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 26px; margin: 0 auto 16px;
    background: #FFF3E3; color: #F5891F;
}
.confirm-icon.danger { background: #FDECEC; color: #DC2626; }
.confirm-dialog h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: #16294E; }
.confirm-dialog p { margin: 0 0 22px; font-size: 13.5px; color: #4C5D7D; line-height: 1.5; }
.confirm-actions { justify-content: center; }

/* Toast notifications - top-right stack, auto-dismiss. */
.toast-host {
    position: fixed; top: 20px; right: 20px; z-index: 2000;
    display: flex; flex-direction: column; gap: 10px; max-width: 420px;
}
.toast {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(22, 41, 78, 0.18);
    font-size: 13.5px; font-weight: 600; color: #fff; animation: toast-in 0.2s ease;
    line-height: 1.4;
}
.toast .toast-close { flex-shrink: 0; }
.toast-success { background: #22C55E; }
.toast-error { background: #DC2626; }
.toast-info { background: #16294E; }
.toast-close { border: none; background: none; color: #fff; font-size: 16px; cursor: pointer; opacity: 0.85; line-height: 1; }
.toast-close:hover { opacity: 1; }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: none; }
}

/* User Group Rights - permission matrix, distinct from the CRUD masters' list/filter/modal grid. */
.rights-toolbar {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.rights-group-picker { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: #4C5D7D; }
.rights-group-picker select {
    font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid #E5E9F1;
    border-radius: 8px; color: #16294E; background: #fff; min-width: 260px;
}
.rights-table-wrap { overflow-x: auto; }
.rights-table { min-width: 900px; }
.rights-table th { vertical-align: bottom; line-height: 1.5; }
.rights-table th a {
    font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: normal;
    color: #1E6091; text-decoration: none; cursor: pointer;
}
.rights-table th a:hover { color: #F5891F; }
.rights-item-col { text-align: left; white-space: nowrap; }
.rights-module-row td {
    background: #F1F3F9; font-weight: 800; font-size: 12px; color: #16294E;
    padding: 8px 8px; text-transform: uppercase; letter-spacing: 0.03em;
}
.rights-submodule-row td {
    background: #FBFCFE; font-weight: 700; font-size: 11px; color: #7A8AA6;
    padding: 6px 8px 6px 20px; text-transform: uppercase; letter-spacing: 0.03em;
}
.rights-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.rights-table input[type="checkbox"]:disabled { cursor: default; opacity: 0.5; }

/* Financial Year - marks the year the caller's own workspace is currently using (can't delete it). */
.fy-current-badge {
    display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700;
    color: #F5891F; background: #FFF3E3; padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.03em;
}

/* User - company assignment checklist in the Add/Edit form. */
.user-company-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;
    max-height: 220px; overflow-y: auto; padding: 12px; border: 1px solid #E5E9F1; border-radius: 8px;
    background: #FBFCFE;
}

/* Mobile overrides - kept at the very end of the file so they win the cascade over every
   unconditional rule above regardless of selector order (a @media block earlier in the file
   loses to an unconditional rule with equal specificity that comes later in source order, even
   when the media query matches - this must be the last word). */
@media (max-width: 640px) {
    .page-heading { flex-direction: column; align-items: stretch; }
    .page-heading .btn-primary { width: 100%; }

    .card { padding: 16px; border-radius: 12px; }

    .modal-backdrop { padding: 0; align-items: stretch; }
    .modal-dialog, .modal-dialog-wide {
        max-width: none; width: 100%; height: 100%; max-height: 100%; border-radius: 0;
    }
    .modal-body { padding: 16px; }

    .grid-search { max-width: none; }

    .rights-group-picker select { min-width: 0; width: 100%; }

    .user-company-list { grid-template-columns: 1fr; }

    .pagination { justify-content: center; text-align: center; }
}