/* ═══════════════════════════════════════════════════
   BASE.CSS — Accounting System
   Clean unified stylesheet — no duplicate rules
   ═══════════════════════════════════════════════════ */

/* ── Inter Font ──────────────────────────────────── */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style:  normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style:  normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter_18pt-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style:  normal;
    font-display: swap;
}

/* ── Reset ───────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

/* ── Global typography ───────────────────────────── */
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', sans-serif;
    font-size:   14px;
    font-weight: 400;
    line-height: 1.5;
    color:       #111;
    background:  #f4f5f7;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Navbar ──────────────────────────────────────── */
.navbar {
    background:      #3202a1;
    padding:         0 20px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          44px;
    position:        sticky;
    top:             0;
    z-index:         100;
}
.navbar-brand {
    font-size:       14px;
    font-weight:     600;
    color:           #fff;
    text-decoration: none;
    letter-spacing:  -0.2px;
}
.navbar-right {
    display:     flex;
    align-items: center;
    gap:         16px;
    font-size:   12px;
}
.navbar-right a {
    color:           rgba(255,255,255,0.7);
    text-decoration: none;
}
.navbar-right a:hover { color: #fff; }
.navbar-user {
    display:     flex;
    align-items: center;
    gap:         8px;
    color:       rgba(255,255,255,0.7);
    font-size:   12px;
}
.navbar-avatar {
    width:           26px;
    height:          26px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.15);
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       10px;
    font-weight:     600;
}
.navbar-divider { color: rgba(255,255,255,0.3); }
.navbar-role    { color: rgba(255,255,255,0.5); font-size: 12px; }
.navbar-icon-link {
    color:           rgba(255,255,255,0.6);
    font-size:       16px;
    text-decoration: none;
    display:         flex;
    align-items:     center;
}
.navbar-icon-link:hover { color: #fff; }
.navbar-logout {
    padding:         4px 10px;
    border-radius:   5px;
    border:          1px solid rgba(255,255,255,0.2);
    background:      transparent;
    color:           rgba(255,255,255,0.8);
    font-size:       12px;
    font-weight:     500;
    cursor:          pointer;
    text-decoration: none;
    transition:      all 0.1s;
}
.navbar-logout:hover {
    background: rgba(255,255,255,0.1);
    color:      #fff;
}

/* ── Layout ──────────────────────────────────────── */
.layout {
    display:   flex;
    height:    calc(100vh - 44px);
    overflow:  hidden;
}

/* ── Sidebar container ───────────────────────────── */
.sidebar {
    width:        220px;
    min-width:    220px;
    background:   #fafafa;
    border-right: 1px solid #ebebeb;
    padding:      8px 0 20px;
    overflow-y:   auto;
    flex-shrink:  0;
}

/* ── Sidebar search ──────────────────────────────── */
.sb-search-wrap {
    position:      relative;
    padding:       10px 10px 8px;
    border-bottom: 1px solid #e8e8e8;
}
.sb-search-icon {
    position:       absolute;
    left:           18px;
    top:            50%;
    transform:      translateY(-50%);
    color:          #aaa;
    font-size:      13px;
    pointer-events: none;
}
.sb-search-input {
    width:         100%;
    padding:       6px 8px 6px 28px;
    border:        1px solid #e0e0e0;
    border-radius: 6px;
    font-size:     12px;
    font-family:   inherit;
    outline:       none;
    background:    #f8f8f8;
    color:         #111;
    box-sizing:    border-box;
    transition:    border-color 0.15s, background 0.15s;
}
.sb-search-input:focus {
    border-color: #134e4a;
    background:   #fff;
    box-shadow:   0 0 0 2px rgba(19,78,74,0.1);
}
.sb-search-input::placeholder { color: #bbb; }

/* ── Sidebar group buttons ───────────────────────── */
.sb-group-btn {
    display:       flex;
    align-items:   center;
    gap:           9px;
    width:         calc(100% - 12px);
    padding:       8px 14px;
    background:    none;
    border:        none;
    cursor:        pointer;
    font-family:   inherit;
    font-size:     13px;
    font-weight:   500;
    color:         #444;
    text-align:    left;
    border-radius: 6px;
    margin:        1px 6px;
    transition:    background 0.15s, color 0.15s;
}
.sb-group-btn:hover {
    background: #f0faf8;
    color:      #134e4a;
}
.sb-group-btn .ti {
    font-size:   15px;
    flex-shrink: 0;
    color:       #888;
}
.sb-group-btn:hover .ti { color: #134e4a; }
.sb-group-btn span      { flex: 1; }

/* Chevron */
.sb-chevron {
    font-size:   11px !important;
    color:       #ccc !important;
    transition:  transform 0.2s !important;
    margin-left: auto;
}
.sb-chevron.open { transform: rotate(90deg); }

/* ── Sidebar collapsible groups ──────────────────── */
.sb-group       { display: none; overflow: hidden; }
.sb-group.open  { display: block; }

/* ── Sidebar sub-items ───────────────────────────── */
.sb-sub {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         6px 14px 6px 32px;
    font-size:       12.5px;
    color:           #555;
    text-decoration: none;
    border-radius:   6px;
    margin:          1px 6px;
    transition:      background 0.15s, color 0.15s;
}
.sb-sub:hover  { background: #f0faf8; color: #134e4a; }
.sb-sub.active {
    background:  #e6f4f1;
    color:       #134e4a;
    font-weight: 600;
}
.sb-sub .ti {
    font-size:   13px;
    flex-shrink: 0;
    color:       #aaa;
}
.sb-sub:hover .ti,
.sb-sub.active .ti { color: #134e4a; }

/* New/create quick links */
.sb-new         { color: #134e4a; opacity: 0.75; }
.sb-new:hover   { opacity: 1; }
.sb-new .ti     { color: #134e4a !important; }

/* ── Dashboard top-level item ────────────────────── */
a.sb-item {
    display:         flex;
    align-items:     center;
    gap:             9px;
    padding:         8px 14px;
    font-size:       13px;
    font-weight:     500;
    color:           #444;
    text-decoration: none;
    border-radius:   6px;
    margin:          1px 6px;
    transition:      background 0.15s, color 0.15s;
}
a.sb-item:hover  { background: #f0faf8; color: #134e4a; }
a.sb-item.active {
    background:  #e6f4f1;
    color:       #134e4a;
    font-weight: 600;
}
a.sb-item .ti {
    font-size:   15px;
    color:       #888;
    flex-shrink: 0;
}
a.sb-item:hover .ti,
a.sb-item.active .ti { color: #134e4a; }

/* Search filtering */
.sb-hidden { display: none !important; }

/* ── Main content ────────────────────────────────── */
.main {
    flex:       1;
    padding:    24px;
    overflow-y: auto;
    min-width:  0;
    background: #f4f5f7;
}

/* ── Messages ────────────────────────────────────── */
.message-success {
    background:    #f0fdf4;
    border:        1px solid #bbf7d0;
    color:         #166534;
    padding:       10px 14px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size:     13px;
    display:       flex;
    align-items:   center;
    gap:           8px;
}
.message-error {
    background:    #fef2f2;
    border:        1px solid #fecaca;
    color:         #991b1b;
    padding:       10px 14px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size:     13px;
    display:       flex;
    align-items:   center;
    gap:           8px;
}

/* ── Page header ─────────────────────────────────── */
.page-header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    margin-bottom:   20px;
}
.page-header h2 {
    font-size:   22px;
    font-weight: 600;
    color:       #111;
    margin:      0 0 3px;
}
.page-header p {
    font-size: 13px;
    color:     #888;
    margin:    0;
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         7px 14px;
    border-radius:   6px;
    font-size:       13px;
    font-weight:     500;
    cursor:          pointer;
    text-decoration: none;
    border:          1px solid transparent;
    transition:      all 0.1s;
    white-space:     nowrap;
    font-family:     inherit;
}
.btn-primary  { background: #134e4a; color: #fff; border-color: #134e4a; }
.btn-primary:hover  { background: #0f3d3a; border-color: #0f3d3a; }
.btn-secondary { background: #fff; color: #374151; border-color: #d1d5db; }
.btn-secondary:hover { background: #f9fafb; }
.btn-danger   { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn-danger:hover   { background: #b91c1c; }
.btn-full     { width: 100%; justify-content: center; }

/* ── Form elements ───────────────────────────────── */
.form-card {
    background:    #fff;
    border:        1px solid #e5e5e5;
    border-radius: 10px;
    padding:       20px 24px;
    margin-bottom: 16px;
    max-width:     760px;
}
.form-section       { margin-bottom: 20px; }
.form-section-title {
    font-size:     12px;
    font-weight:   600;
    color:         #888;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 12px;
}
.form-group         { margin-bottom: 16px; }
.form-group label   {
    display:       block;
    font-size:     13px;
    font-weight:   500;
    color:         #374151;
    margin-bottom: 5px;
}
.form-group label span {
    color:       #aaa;
    font-weight: 400;
    font-size:   12px;
}
.form-input {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid #d1d5db;
    border-radius: 6px;
    font-size:     13px;
    font-family:   inherit;
    color:         #111;
    background:    #fff;
    outline:       none;
    transition:    border 0.1s;
    box-sizing:    border-box;
}
.form-input:focus {
    border-color: #134e4a;
    box-shadow:   0 0 0 2px rgba(19,78,74,0.08);
}
.form-hint {
    font-size:  12px;
    color:      #aaa;
    margin-top: 4px;
}
.form-info {
    background:    #f0faf8;
    border:        1px solid #a7f3d0;
    border-radius: 8px;
    padding:       10px 14px;
    font-size:     13px;
    color:         #555;
    margin-bottom: 16px;
}
.form-grid-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   14px;
}
.form-checkbox {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    font-size:   14px;
    font-weight: 400;
    color:       #374151;
    cursor:      pointer;
}
.form-checkbox input[type="checkbox"] {
    width:         16px;
    height:        16px;
    accent-color:  #134e4a;
    cursor:        pointer;
    margin-top:    2px;
    flex-shrink:   0;
}
.form-actions {
    display:      flex;
    gap:          10px;
    align-items:  center;
    margin-top:   20px;
    padding-top:  16px;
    border-top:   1px solid #f0f0f0;
}

/* ── Badges ──────────────────────────────────────── */
.badge {
    display:      inline-block;
    padding:      2px 8px;
    border-radius: 10px;
    font-size:    11px;
    font-weight:  600;
    white-space:  nowrap;
}
.badge-draft     { background: #f3f4f6; color: #6b7280; }
.badge-posted    { background: #dbeafe; color: #1d4ed8; }
.badge-active    { background: #dcfce7; color: #15803d; }
.badge-inactive  { background: #f3f4f6; color: #6b7280; }
.badge-pending   { background: #fef3c7; color: #92400e; }
.badge-error     { background: #fee2e2; color: #dc2626; }
.badge-cancelled { background: #f3f4f6; color: #6b7280; }
.badge-neutral   { background: #f0f0f0; color: #555; }
.badge-system    { background: #e0e7ff; color: #4338ca; }

/* ── Tables ──────────────────────────────────────── */
.table-card {
    background:    #fff;
    border:        1px solid #e5e5e5;
    border-radius: 10px;
    overflow:      hidden;
    margin-bottom: 16px;
}
.table-card-header {
    padding:         12px 16px;
    border-bottom:   1px solid #f0f0f0;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       13px;
    font-weight:     600;
    color:           #111;
}
.table-empty {
    text-align: center;
    padding:    32px;
    color:      #aaa;
    font-size:  13px;
}
.table-empty a   { color: #134e4a; text-decoration: none; }
.table-actions   { white-space: nowrap; }

/* Global table styles — apply to all table types */
.data-table,
.stmt-table,
.lines-table,
.gl-preview-table,
.alloc-table,
.outstanding-table,
.docs-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       13px;
    font-weight:     400;
    color:           #111;
}

/* Table headers */
.data-table th,
.stmt-table th,
.lines-table th,
.gl-preview-table th,
.alloc-table th,
.outstanding-table th,
.docs-table th {
    padding:         8px 12px;
    font-size:       11px;
    font-weight:     600;
    color:           #666;
    text-transform:  uppercase;
    letter-spacing:  .04em;
    border-bottom:   1px solid #e5e5e5;
    background:      #f5f5f5;
    text-align:      left;
    white-space:     nowrap;
}

/* Table cells */
.data-table td,
.stmt-table td,
.lines-table td,
.gl-preview-table td,
.alloc-table td,
.outstanding-table td,
.docs-table td {
    padding:        10px 12px;
    border-bottom:  1px solid #f0f0f0;
    font-size:      13px;
    font-weight:    400;
    color:          #111;
    vertical-align: middle;
}

/* Last row no border */
.data-table tbody tr:last-child td,
.stmt-table tbody tr:last-child td { border-bottom: none; }

/* Row hover */
.data-table tbody tr:hover td,
.stmt-table tbody tr:hover td,
.alloc-table tbody tr:hover td,
.outstanding-table tbody tr:hover td { background: #fafafa; }

/* Right-aligned cells */
.data-table th.r, .data-table td.r,
.stmt-table th.r, .stmt-table td.r,
.lines-table th.r, .lines-table td.r,
.gl-preview-table th.r, .gl-preview-table td.r,
.alloc-table th.r, .alloc-table td.r,
.outstanding-table th.r, .outstanding-table td.r,
.docs-table th.r, .docs-table td.r {
    text-align: right;
}

/* Numeric cells */
td.num,
td[data-fmt],
.td-num,
.data-table td.r {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 500;
}

/* Table footer */
.data-table tfoot td,
.stmt-table tfoot td,
.lines-table tfoot td {
    padding:     10px 12px;
    background:  #f8f8f8;
    font-size:   13px;
    font-weight: 600;
    border-top:  2px solid #e5e5e5;
    border-bottom: none;
}
.data-table tfoot td.r,
.stmt-table tfoot td.r { text-align: right; }

/* Table utility */
.table-link { color: #134e4a; text-decoration: none; font-weight: 500; }
.table-link:hover { text-decoration: underline; }
.td-muted   { color: #888; font-size: 12px; }
.td-bold    { font-weight: 500; }
.td-code    { font-family: monospace; font-size: 12px; color: #555; }

/* ── Action links ────────────────────────────────── */
.action-edit {
    color:           #134e4a;
    font-size:       12px;
    font-weight:     600;
    text-decoration: none;
    margin-right:    8px;
}
.action-edit:hover   { text-decoration: underline; }
.action-delete {
    color:           #dc2626;
    font-size:       12px;
    font-weight:     600;
    text-decoration: none;
    margin-right:    8px;
}
.action-delete:hover { text-decoration: underline; }

/* ── Status / amount colors ──────────────────────── */
.status-active   { color: #15803d; font-weight: 600; }
.status-inactive { color: #aaa; }
.status-debit    { color: #1d4ed8; font-weight: 500; }
.status-credit   { color: #15803d; font-weight: 500; }
.status-yes      { color: #15803d; font-weight: 500; }
.status-no       { color: #aaa; }
.amt-positive    { color: #dc2626; font-weight: 600; }
.amt-negative    { color: #f59e0b; font-weight: 600; }
.amt-zero        { color: #15803d; font-weight: 600; }
.amt-paid        { color: #15803d; font-weight: 600; }
.amt-neutral     { color: #111;    font-weight: 600; }

/* ── Metric cards ────────────────────────────────── */
.metrics-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:                   12px;
    margin-bottom:         20px;
}
.metric-card {
    background:    #fff;
    border:        1px solid #e0e0e0;
    border-radius: 8px;
    padding:       14px 16px;
}
.metric-label {
    font-size:      11px;
    color:          #888;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom:  6px;
}
.metric-value { font-size: 20px; font-weight: 600; color: #111; }
.metric-sub   { font-size: 11px; color: #aaa; margin-top: 3px; }

/* ── Filter bar ──────────────────────────────────── */
.filter-bar {
    background:    #fff;
    border:        1px solid #e5e5e5;
    border-radius: 10px;
    padding:       14px 16px;
    margin-bottom: 16px;
}
.filter-label {
    display:       block;
    font-size:     12px;
    font-weight:   500;
    color:         #555;
    margin-bottom: 5px;
}

/* ── Status tabs ─────────────────────────────────── */
.status-tabs {
    display:       flex;
    gap:           4px;
    margin-bottom: 16px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 0;
}
.status-tab {
    padding:       8px 16px;
    font-size:     13px;
    font-weight:   500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color:         #888;
    white-space:   nowrap;
}
.status-tab.active {
    border-bottom-color: #134e4a;
    color:               #134e4a;
}
.status-tab-count {
    font-size:     11px;
    padding:       1px 7px;
    border-radius: 10px;
    margin-left:   4px;
}

/* ── Auth pages ──────────────────────────────────── */
.page-auth {
    min-height:      100vh;
    background:      #f4f5f7;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.message-auth { max-width: 420px; margin: 0 auto 12px; }

/* ── Attachment widget ───────────────────────────── */
.attachment-zone {
    border:        2px dashed #d1d5db;
    border-radius: 8px;
    padding:       16px;
    text-align:    center;
    cursor:        pointer;
    transition:    all 0.15s;
    background:    #fafafa;
}
.attachment-zone:hover,
.attachment-zone.dragover {
    border-color: #134e4a;
    background:   #f0faf8;
}
.attachment-zone p { font-size: 13px; color: #888; margin: 0; }
.attachment-list {
    margin-top:     12px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}
.attachment-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       8px 12px;
    background:    #fff;
    border:        1px solid #e5e5e5;
    border-radius: 6px;
    font-size:     13px;
}
.attachment-item-icon    { font-size: 20px; color: #134e4a; flex-shrink: 0; }
.attachment-item-info    { flex: 1; min-width: 0; }
.attachment-item-name    {
    font-weight:   500;
    color:         #111;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.attachment-item-meta    { font-size: 11px; color: #888; margin-top: 2px; }
.attachment-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.attachment-preview {
    width:         40px;
    height:        40px;
    object-fit:    cover;
    border-radius: 4px;
    border:        1px solid #e5e5e5;
}
.attachment-uploading { opacity: 0.6; pointer-events: none; }

/* ── Reference cells ─────────────────────────────── */
.td-ref {
    font-family:     monospace;
    font-size:       13px;
    font-weight:     600;
    color:           #134e4a;
    text-decoration: none;
}
.td-ref:hover { text-decoration: underline; }

/* ── Section card ────────────────────────────────── */
.section-card h3,
.table-card-header strong {
    font-size:   13px;
    font-weight: 600;
    color:       #111;
}

/* ── Sidebar brand (legacy) ──────────────────────── */
.sidebar-brand      { padding: 14px 16px 12px; border-bottom: 1px solid #e5e5e5; margin-bottom: 4px; }
.sidebar-brand-name { font-size: 13px; font-weight: 600; color: #134e4a; }
.sidebar-brand-sub  { font-size: 11px; color: #888; margin-top: 2px; }

/* ── SweetAlert2 customization ───────────────────── */
.swal-compact { padding: 1.5rem !important; }
.swal-compact .swal2-icon {
    width:  3rem !important;
    height: 3rem !important;
    margin: 0.5rem auto 0.75rem !important;
}
.swal-compact .swal2-icon .swal2-icon-content { font-size: 1.5rem !important; }
.swal-title   { font-size: 1.1rem !important; font-weight: 600 !important; }
.swal2-popup  { border-radius: 10px !important; font-family: inherit !important; }
.swal2-actions { gap: 8px !important; }
.swal2-confirm, .swal2-cancel {
    border-radius: 6px !important;
    font-size:     13px !important;
    padding:       8px 18px !important;
    font-weight:   600 !important;
}

/* ── Tabular numbers (amounts) ───────────────────── */
.font-mono,
td.r, td.amount, .amount, .balance, tfoot td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}