/* DemoSoftware application UI theme - presentation only; no business logic changes. */
:root {
    --app-primary: #2457a7;
    --app-primary-dark: #193f7b;
    --app-accent: #16a085;
    --app-ink: #1d2939;
    --app-muted: #667085;
    --app-border: #e5eaf1;
    --app-surface: #ffffff;
    --app-page: #f4f7fb;
    --app-sidebar: #14243a;
    --app-sidebar-hover: #203b5d;
    --app-radius: 12px;
    --app-shadow: 0 5px 18px rgba(16, 24, 40, .055);
}
html { font-size: 14px; }
body { background: var(--app-page); color: var(--app-ink); font-family: "Segoe UI", Arial, sans-serif; }
.app-header { box-shadow: 0 2px 12px rgba(16,24,40,.045); border-bottom-color: var(--app-border); }
.brand { color: var(--app-primary); letter-spacing: -.35px; }
.brand span { display: inline-flex; align-items: center; gap: 9px; }
.brand span:before { content: "D"; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(135deg,var(--app-primary),#477fd0); font-size: 18px; font-weight: 800; }
.sidebar { background: linear-gradient(180deg,#172b45 0%,var(--app-sidebar) 100%); box-shadow: 5px 0 20px rgba(16,24,40,.07); }
.menu-heading { color: #91a5bd; font-size: 10px; letter-spacing: 1.25px; padding-top: 19px; }
.sidebar a { min-height: 40px; border: 1px solid transparent; border-radius: 9px; font-weight: 500; }
.sidebar a:hover { background: rgba(255,255,255,.08); }
.sidebar a.active { background: linear-gradient(90deg,rgba(62,126,207,.38),rgba(62,126,207,.14)); border-color: rgba(145,184,235,.16); color: #fff; box-shadow: inset 3px 0 #7eb2f3; }
.menu-icon { color: #a9c2df; font-size: 16px; }
.main-content { padding-top: calc(var(--header-height) + 28px); }
.page-title { color: var(--app-ink); font-size: 24px; letter-spacing: -.45px; }
.card { border: 1px solid var(--app-border) !important; border-radius: var(--app-radius) !important; box-shadow: var(--app-shadow) !important; }
.card-body { padding: 18px; }
.card > .p-3 { padding: 19px !important; }
.card h3, .card h4 { color: #172b45; font-weight: 700; letter-spacing: -.35px; }
.form-label { color: #344054; font-size: 12px; font-weight: 650; margin-bottom: 6px; }
.form-control, .form-select { min-height: 38px; border-color: #d8e0ea; border-radius: 8px; color: #243449; font-size: 13px; }
.form-control:focus, .form-select:focus { border-color: #7aa6df; box-shadow: 0 0 0 .2rem rgba(36,87,167,.12); }
textarea.form-control { min-height: 86px; }
.btn { border-radius: 8px; font-size: 13px; font-weight: 600; padding: 8px 13px; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--app-primary); border-color: var(--app-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--app-primary-dark); border-color: var(--app-primary-dark); }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.table { color: #344054; font-size: 13px; margin-bottom: 0; }
.table thead th { background: #f7f9fc; color: #475467; font-size: 11px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid #e4eaf2; padding: 11px 12px; }
.table tbody td { padding: 10px 12px; border-color: #edf0f5; vertical-align: middle; }
.table-hover tbody tr:hover { background: #f8fbff; }
.table-bordered { border-color: var(--app-border); }
.alert { border: 0; border-radius: 10px; box-shadow: var(--app-shadow); }
.badge { border-radius: 20px; font-weight: 650; padding: 6px 9px; }
hr { border-color: var(--app-border); opacity: 1; }
.modal-content { border: 0; border-radius: 14px; box-shadow: 0 18px 55px rgba(16,24,40,.2); }
.modal-header, .modal-footer { border-color: var(--app-border); padding: 15px 18px; }
.modal-title { font-size: 17px; font-weight: 700; }
.dropdown-menu { border: 1px solid var(--app-border); border-radius: 10px; box-shadow: var(--app-shadow); padding: 6px; }
.dropdown-item { border-radius: 6px; font-size: 13px; padding: 8px 10px; }
/* Dashboard visual hierarchy */
.main-content .row.g-3 > [class*="col-"] > .card { min-height: 112px; }
.main-content .row.g-3 > [class*="col-"] > .card .text-muted { color: var(--app-muted) !important; font-size: 12px; font-weight: 600; }
.main-content .row.g-3 > [class*="col-"] > .card h3,
.main-content .row.g-3 > [class*="col-"] > .card h4 { font-variant-numeric: tabular-nums; }
/* Transaction forms and report filters */
form.row.g-2, form.row.g-3 { align-items: end; }
.table-responsive { border-radius: 8px; }
@media (max-width: 900px) {
    .app-header { gap: 8px; }
    .company-branch-form { flex-shrink: 0; }
}
@media (min-width: 769px) and (max-width: 900px) {
    html body .app-header .company-branch-form select { min-width: 155px !important; max-width: 175px !important; }
}
@media (max-width: 768px) {
    :root { --header-height: 108px; }
    .app-header { height: auto; min-height: var(--header-height); flex-wrap: wrap; align-content: center; row-gap: 6px; padding-top: 6px; padding-bottom: 6px; }
    .app-header .brand { flex: 1 1 auto; min-width: 150px; }
    .header-right { flex: 0 0 100%; justify-content: flex-end; }
    .company-branch-form { flex: 1 1 auto; justify-content: flex-end; }
    .company-branch-form select { flex: 1 1 0; min-width: 0 !important; max-width: 210px !important; }
    .main-content { padding: calc(var(--header-height) + 18px) 12px 18px; }
    .page-title { font-size: 21px; }
    .card-body { padding: 13px; }
    .app-header .brand { font-size: 17px; }
    .company-branch-form select { min-width: 82px; max-width: 105px; }
    .table { font-size: 12px; }
    .table thead th, .table tbody td { padding: 8px; }
}
/* Login screen */
body:has(.login-card) { background: radial-gradient(circle at 15% 15%,#e7effb 0,#f4f7fb 42%,#eaf1f8 100%); }
.login-card { border: 1px solid rgba(255,255,255,.85); border-radius: 18px !important; box-shadow: 0 22px 65px rgba(25,55,95,.14) !important; }
.login-title { color: var(--app-primary) !important; letter-spacing: -.6px; }
.login-card .form-control { height: 44px; }
.login-card .login-btn { height: 46px; border-radius: 9px; }

/* Phase 2 UI finishing pass: consistent page chrome and responsive data-entry screens */
body { margin-bottom: 0; min-width: 320px; }
.main-content { min-width: 0; }
.main-content > .page-title,
.main-content .d-flex.justify-content-between.align-items-center.mb-4,
.main-content .d-flex.justify-content-between.align-items-center.mb-3 { gap: 14px; }
.page-title { line-height: 1.25; }
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(190,210,235,.35) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(190,210,235,.3); border-radius: 10px; }
.sidebar a { line-height: 1.25; }
.sidebar a:focus-visible, .btn:focus-visible, .form-control:focus-visible,
.form-select:focus-visible, .dropdown-item:focus-visible { outline: 3px solid rgba(72,139,220,.35); outline-offset: 2px; }
.menu-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; }
.main-content .card { overflow: hidden; }
.main-content .card-header { background: #fbfcfe; border-bottom: 1px solid var(--app-border); color: #26364b; font-size: 14px; font-weight: 700; padding: 13px 17px; }
.main-content .card-footer { background: #fbfcfe; border-top: 1px solid var(--app-border); }
.main-content .table-responsive { border: 1px solid var(--app-border); }
.main-content .table-responsive .table { min-width: 620px; }
.main-content .table tfoot th, .main-content .table tfoot td { background: #f7f9fc; font-weight: 700; border-top: 1px solid #dfe6ef; }
.main-content .form-check-input { border-color: #b9c5d4; }
.main-content .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.main-content .btn-outline-primary { color: var(--app-primary); border-color: #b8cbe5; }
.main-content .btn-outline-primary:hover { color: #fff; background: var(--app-primary); border-color: var(--app-primary); }
.main-content .btn-outline-secondary { border-color: #d5dde7; color: #475467; }
.main-content .text-muted { color: #667085 !important; }
.main-content .page-title + .text-muted { margin-top: -12px; margin-bottom: 18px; }
.main-content .row { --bs-gutter-y: 1rem; }
.main-content .form-text { color: #667085; font-size: 11px; }
.main-content .validation-summary-errors, .main-content .field-validation-error { color: #b42318; font-size: 12px; }
.main-content .input-validation-error { border-color: #d92d20; background-color: #fffafa; }
.main-content .pagination .page-link { color: var(--app-primary); border-color: var(--app-border); }
.main-content .pagination .active .page-link { background: var(--app-primary); border-color: var(--app-primary); color: #fff; }
.main-content .table .btn { white-space: nowrap; }
.main-content .alert { padding: 12px 15px; }
.modal-body .table-responsive { max-height: min(55vh, 520px); overflow: auto; }
.modal-body .table-responsive thead { position: sticky; top: 0; z-index: 2; }
.modal-body .table-responsive thead th { background: #f3f6fa; }
@media (max-width: 768px) {
 .app-header { height: var(--header-height); }
 .header-right, .company-branch-form { min-width: 0; }
 .company-branch-form select { min-width: 0 !important; max-width: 34vw !important; }
 .main-content { overflow-x: hidden; }
 .main-content > .d-flex, .main-content .d-flex.justify-content-between.align-items-center.mb-4, .main-content .d-flex.justify-content-between.align-items-center.mb-3 { flex-wrap: wrap; align-items: flex-start !important; }
 .main-content .page-title { margin-bottom: 14px; }
 .main-content .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
 .main-content .card-header { padding: 11px 13px; }
 .main-content .card-body { overflow-x: auto; }
 .main-content .table-responsive { -webkit-overflow-scrolling: touch; }
 .main-content .btn { max-width: 100%; }
 .main-content form .col-md-2, .main-content form .col-md-3, .main-content form .col-md-4, .main-content form .col-md-6 { width: 100%; }
}
@media (max-width: 420px) {
  :root { --header-height: 104px; }
  .brand { font-size: 16px !important; }
 .brand span:before { width: 29px; height: 29px; }
 .app-header { padding: 0 8px; }
 .header-right { gap: 5px; }
 .header-right .btn { padding: 6px 8px; }
 .company-branch-form select { font-size: 10px !important; }
 .main-content { padding-left: 10px !important; padding-right: 10px !important; }
}
@media print {
 body { background: #fff !important; margin: 0 !important; }
 .app-header, .sidebar, .sidebar-overlay, .no-print { display: none !important; }
 .main-content { margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
 .card { box-shadow: none !important; border-color: #ddd !important; }
}