/* App-specific styles on top of the AppDashboard template (main.css). Uses the template colour variables so dark mode works. */
.simple-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}
.simple-card{width:100%;max-width:460px}
.d-contents{display:contents}
.avatar-initials{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent-color);color:#fff;font-weight:700;font-size:.8rem;flex:0 0 auto}
.avatar-initials.avatar-lg{width:52px;height:52px;font-size:1.1rem;margin-bottom:8px}
.header-logo-mark img,.sidebar-logo-mark img{object-fit:contain}
.mobile-header-menu button.mobile-menu-item{border:0;background:transparent;width:100%}

/* generic helpers used by the views */
.num{text-align:right;white-space:nowrap}
.req::after{content:" *";color:var(--danger-color)}
.section-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-color);margin:18px 0 8px;font-weight:600}
.filter-bar .form-control,.filter-bar .form-select{min-width:120px}
.table-responsive{border-radius:var(--radius-md)}
.table td,.table th{vertical-align:middle}
.table thead th{white-space:nowrap}
.alert{border-radius:var(--radius-md)}
.row>[class*=col-]>.perm-grid label{display:block}
.rel{position:relative}
.text-muted{color:var(--muted-color)!important}

/* dashboard KPI tiles */
.kpi{display:flex;align-items:center;gap:14px}
.kpi .ico{width:46px;height:46px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;flex:0 0 auto}
.kpi .val{font-size:1.25rem;font-weight:700;line-height:1.15;color:var(--heading-color)}
.kpi .lbl{font-size:.8rem;color:var(--muted-color)}

/* invoice / purchase line form */
.items-table input,.items-table select{min-width:70px}
.items-table td{padding:4px}
.items-table .c-name{min-width:220px}
.items-table .c-num{width:100px}
.items-table .c-sm{width:80px}
.totals-box td{padding:4px 8px}
.totals-box .grand td{font-size:1.15rem;font-weight:700;border-top:2px solid var(--heading-color)}
.suggest{position:absolute;z-index:1050;background:var(--surface-color);color:var(--default-color);border:1px solid var(--border-color);border-radius:var(--radius-md);max-height:260px;overflow:auto;box-shadow:var(--shadow-lg);min-width:280px}
.suggest .it{padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--border-color-light)}
.suggest .it:hover,.suggest .it.sel{background:var(--table-hover-bg)}
.suggest .it small{color:var(--muted-color)}

@media print{
	.no-print,.sidebar,.header,.footer,.page-header,.sidebar-overlay,.mobile-header-menu{display:none!important}
	.main{margin:0!important}
	.main-content{padding:0!important}
	body{background:#fff}
}

/* layout tweaks */
.page-header .page-title{display:none}
.page-header{margin-bottom:var(--spacing-md)}
.items-table select{min-width:96px;padding-right:1.8rem}
.items-table select.form-select-sm,.items-table .form-select{background-position:right .5rem center}
.items-table .c-name{min-width:240px}
.table-responsive>.table{margin-bottom:0}

/* theme-aware replacements for fixed light utility classes used in the views */
.bg-white,.bg-light{background-color:var(--surface-color)!important;color:var(--default-color)}
tfoot.bg-light,tr.bg-light,td.bg-light,th.bg-light,.table .bg-light{background-color:var(--table-header-bg)!important}
.table-light,.table-light>th,.table-light>td,.table>:not(caption)>.table-light>*{--bs-table-bg:var(--table-header-bg);--bs-table-color:var(--heading-color);background-color:var(--table-header-bg)!important;color:var(--heading-color)!important}
.text-bg-light{background-color:var(--table-header-bg)!important;color:var(--default-color)!important;border:1px solid var(--border-color)}
.btn-light{background-color:var(--surface-color);border-color:var(--border-color);color:var(--default-color)}
.btn-light:hover{background-color:var(--table-hover-bg);color:var(--heading-color)}
.border-light{border-color:var(--border-color)!important}
.table tfoot th,.table tfoot td{color:var(--heading-color)}
input[type=month],input[type=date]{min-width:150px}
.items-table .form-control,.items-table .form-select{padding-left:.5rem;padding-right:.5rem}
.items-table select{min-width:84px;padding-right:1.6rem}
.items-table .c-name{min-width:200px}