/* SmartGate – corporate theme */
:root {
    --sg-primary: #0b4f6c;
    --sg-primary-dark: #083a50;
    --sg-accent: #01baef;
    --sg-teal: #0f9d8a;
    --sg-bg: #f3f6f9;
    --sg-sidebar: #0a2e3f;
    --sg-sidebar-hover: #12445b;
    --sg-text-muted: #6b7a89;
    --sg-radius: .6rem;
}
body { background: var(--sg-bg); font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; font-size: .925rem; color: #1f2d3a; }
a { color: var(--sg-primary); }
.btn-primary { --bs-btn-bg: var(--sg-primary); --bs-btn-border-color: var(--sg-primary); --bs-btn-hover-bg: var(--sg-primary-dark); --bs-btn-hover-border-color: var(--sg-primary-dark); --bs-btn-active-bg: var(--sg-primary-dark); }
.btn-outline-primary { --bs-btn-color: var(--sg-primary); --bs-btn-border-color: var(--sg-primary); --bs-btn-hover-bg: var(--sg-primary); --bs-btn-hover-border-color: var(--sg-primary); }
.text-primary { color: var(--sg-primary) !important; }
.bg-teal { background-color: var(--sg-teal) !important; color: #fff; }
.bg-primary { background-color: var(--sg-primary) !important; }

/* Layout */
.sg-wrapper { display: flex; min-height: 100vh; }
.sg-sidebar { width: 252px; background: var(--sg-sidebar); color: #c9d7e1; flex-shrink: 0; position: fixed; inset: 0 auto 0 0; overflow-y: auto; z-index: 1030; transition: transform .2s; }
.sg-sidebar .brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.sg-sidebar .brand .logo { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--sg-accent), var(--sg-teal)); display: grid; place-items: center; color: #fff; }
.sg-sidebar .nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #7f9aac; padding: 1rem 1.2rem .35rem; }
.sg-sidebar .nav-link { color: #c9d7e1; padding: .5rem 1.2rem; display: flex; align-items: center; gap: .65rem; border-left: 3px solid transparent; font-size: .9rem; }
.sg-sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sg-sidebar .nav-link:hover { background: var(--sg-sidebar-hover); color: #fff; }
.sg-sidebar .nav-link.active { background: var(--sg-sidebar-hover); color: #fff; border-left-color: var(--sg-accent); }
.sg-sidebar .nav-link .badge { margin-left: auto; }
.sg-main { flex: 1; margin-left: 252px; min-width: 0; display: flex; flex-direction: column; }
.sg-topbar { background: #fff; border-bottom: 1px solid #e3e9ef; padding: .55rem 1.25rem; display: flex; align-items: center; gap: .75rem; position: sticky; top: 0; z-index: 1020; }
.sg-content { padding: 1.25rem; flex: 1; }
.sg-footer { padding: .75rem 1.25rem; color: var(--sg-text-muted); font-size: .78rem; border-top: 1px solid #e3e9ef; background: #fff; }
.sg-backdrop { display: none; }
@media (max-width: 991.98px) {
    .sg-sidebar { transform: translateX(-100%); }
    .sg-sidebar.show { transform: none; }
    .sg-main { margin-left: 0; }
    .sg-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1025; }
    .sg-content { padding: .85rem; }
}

/* Page header */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-header h1 { font-size: 1.35rem; font-weight: 600; margin: 0; }
.page-header .sub { color: var(--sg-text-muted); font-size: .85rem; }

/* Cards */
.card { border: 1px solid #e3e9ef; border-radius: var(--sg-radius); box-shadow: 0 1px 2px rgba(16,40,60,.04); }
.card-header { background: #fff; border-bottom: 1px solid #edf1f5; font-weight: 600; padding: .75rem 1rem; }
.stat-card { border-radius: var(--sg-radius); padding: 1rem 1.1rem; background: #fff; border: 1px solid #e3e9ef; display: flex; align-items: center; gap: .9rem; height: 100%; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
a.stat-card:hover { box-shadow: 0 4px 14px rgba(11,79,108,.12); transform: translateY(-1px); color: inherit; }
.stat-card .icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; flex-shrink: 0; }
.stat-card .value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.stat-card .label { color: var(--sg-text-muted); font-size: .8rem; }
.ic-blue { background: #e4f1f8; color: var(--sg-primary); }
.ic-green { background: #e3f6ef; color: #12805c; }
.ic-orange { background: #fff2e0; color: #c26a00; }
.ic-red { background: #fde8e8; color: #c0262d; }
.ic-purple { background: #efe9fb; color: #6941c6; }
.ic-teal { background: #e0f5f2; color: var(--sg-teal); }
.ic-gray { background: #eef1f4; color: #51606e; }

/* Tables */
.table-sg { margin: 0; }
.table-sg thead th { background: #f6f9fb; color: #4a5a68; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #e3e9ef; white-space: nowrap; }
.table-sg td { vertical-align: middle; }
.table-sg tbody tr:hover { background: #f9fbfd; }
.badge-status { font-weight: 500; font-size: .74rem; padding: .38em .6em; }
.filter-bar { background: #fff; border: 1px solid #e3e9ef; border-radius: var(--sg-radius); padding: .75rem; margin-bottom: 1rem; }
.filter-bar .form-control, .filter-bar .form-select { font-size: .85rem; }

/* Detail lists */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .85rem 1.25rem; }
.dl-grid .k { font-size: .72rem; text-transform: uppercase; color: var(--sg-text-muted); letter-spacing: .04em; }
.dl-grid .v { font-weight: 500; word-break: break-word; }

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline li { position: relative; padding: 0 0 1.1rem 2rem; }
.timeline li::before { content: ""; position: absolute; left: .55rem; top: 1.3rem; bottom: 0; width: 2px; background: #dde5ec; }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: .1rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #dde5ec; display: grid; place-items: center; color: #fff; font-size: .7rem; }
.timeline .done .dot { background: #12805c; }
.timeline .current .dot { background: #e89b00; box-shadow: 0 0 0 4px rgba(232,155,0,.2); }
.timeline .rejected .dot { background: #c0262d; }
.timeline .title { font-weight: 600; }
.timeline .meta { font-size: .8rem; color: var(--sg-text-muted); }

/* Login */
.auth-bg { min-height: 100vh; background: linear-gradient(135deg, #0a2e3f 0%, #0b4f6c 55%, #0f9d8a 100%); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 420px; border-radius: 1rem; border: 0; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.auth-card .brand-mark { width: 56px; height: 56px; border-radius: 14px; background: linear-gradient(135deg, var(--sg-accent), var(--sg-teal)); color: #fff; display: grid; place-items: center; font-size: 1.7rem; margin: 0 auto .75rem; }

/* Public (visitor) pages */
.public-header { background: var(--sg-primary); color: #fff; padding: 1rem; text-align: center; }
.public-header img { max-height: 48px; background: #fff; border-radius: 6px; padding: 3px; }
.public-wrap { max-width: 680px; margin: 0 auto; padding: 1rem; }
.form-step-title { font-weight: 600; color: var(--sg-primary); border-bottom: 2px solid #e4f1f8; padding-bottom: .35rem; margin: 1.25rem 0 .85rem; display: flex; align-items: center; gap: .5rem; }
.form-step-title .n { background: var(--sg-primary); color: #fff; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; }
.share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
.photo-preview { width: 110px; height: 110px; object-fit: cover; border-radius: 10px; border: 1px solid #dde5ec; }
.required::after { content: " *"; color: #c0262d; }

/* Items editor */
.items-table input, .items-table select { min-width: 80px; }
.items-table td { padding: .3rem; }

/* Notifications */
.notif-dropdown { width: 340px; max-height: 420px; overflow-y: auto; }
.notif-item { white-space: normal; border-bottom: 1px solid #f0f3f6; padding: .55rem .9rem; }
.notif-item .t { font-weight: 600; font-size: .85rem; }
.notif-item .m { font-size: .8rem; color: var(--sg-text-muted); }
.toast-container { z-index: 2000; }

/* Print */
@media print {
    .no-print, .sg-sidebar, .sg-topbar, .sg-footer { display: none !important; }
    .sg-main { margin: 0 !important; }
    body { background: #fff; }
    .card { border: 0; box-shadow: none; }
}

/* Photo widget */
.photo-empty { place-items: center; background: #f1f4f7; color: #9aa8b5; font-size: 2.4rem; }
.pw-hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.photo-widget { position: relative; }
#pwCameraModal video { width: 100%; max-height: 60vh; background: #000; border-radius: 8px; object-fit: cover; }
#pwCameraModal { z-index: 1070; }