/* SARIS v2.2 | Deep Blue #14304D · Primary #2B7DCE · Accent #0E8A6D | Compact 192px sidebar */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Inter:wght@400;500;600&display=swap');
:root{
  --primary:#2B7DCE;--primary-dark:#1E5FA0;--primary-deep:#163D64;--primary-light:#E8F1FB;--primary-muted:#A8CFF0;
  --accent:#0E8A6D;--accent-dark:#0A6B54;--accent-light:#E2F5EF;--accent-muted:#7DD4BA;
  --green:#15993F;--green-dark:#0F7A32;--green-light:#E9F7ED;--green-muted:#A3E4B5;
  --yellow:#D4A017;--yellow-dark:#B8890A;--yellow-light:#FDF6E3;--yellow-muted:#F0D87A;
  --ink:#0B1222;--text:#1A2640;--text-secondary:#3D5171;--text-muted:#7C8FAB;
  --border:#D5DCE6;--border-light:#EDF0F5;--surface:#FFFFFF;--bg:#F0F2F7;
  --danger:#C92A2A;--danger-light:#FBE9E9;--warning:#C87A0A;--warning-light:#FDF3E0;
  --info:#1A6DD0;--info-light:#E3EEFB;--success:#0E8A6D;--success-light:#E2F5EF;
  --radius-sm:5px;--radius:8px;--radius-lg:10px;--radius-xl:14px;--radius-full:999px;
  --shadow-xs:0 1px 2px rgba(11,18,34,.06);--shadow-sm:0 2px 6px rgba(11,18,34,.08);--shadow:0 4px 16px rgba(11,18,34,.1);--shadow-lg:0 12px 36px rgba(11,18,34,.14);
  --shadow-primary:0 4px 14px rgba(43,125,206,.3);
  --sidebar-w:192px;
  --font-h:'DM Sans',system-ui,sans-serif;--font-b:'Inter','DM Sans',system-ui,sans-serif
}
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--font-b);font-size:.875rem;line-height:1.5;color:var(--text);background:var(--bg);margin:0;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.font-heading{font-family:var(--font-h);color:var(--ink);line-height:1.2;margin:0}
h1{font-weight:800;font-size:1.4rem}h2{font-weight:700;font-size:1.15rem}h3{font-weight:700;font-size:1rem}h4{font-weight:700;font-size:.88rem}h5{font-weight:600;font-size:.8rem}
p{color:var(--text-secondary);margin:0 0 .5rem}
a{color:var(--primary);text-decoration:none;transition:color .12s}a:hover{color:var(--primary-dark)}
small,.text-sm{font-size:.78rem}.text-xs{font-size:.68rem}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#B8C4D4;border-radius:8px}
.text-primary{color:var(--primary)!important}.text-accent{color:var(--accent)!important}.text-green{color:var(--green)!important}.text-ink{color:var(--ink)!important}.text-muted{color:var(--text-muted)!important}

/* Buttons */
.btn{font-family:var(--font-h);font-weight:600;font-size:.78rem;border-radius:var(--radius);padding:.4rem .9rem;transition:all .12s;border:1.5px solid transparent;display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;line-height:1.4}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;box-shadow:var(--shadow-primary)}
.btn-primary-outline{background:transparent;color:var(--primary);border-color:var(--primary)}.btn-primary-outline:hover{background:var(--primary);color:#fff}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-accent:hover{background:var(--accent-dark);color:#fff}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}.btn-green:hover{background:var(--green-dark);color:#fff}
.btn-danger{background:var(--danger);color:#fff;border-color:var(--danger)}.btn-danger:hover{background:#A12020;color:#fff}
.btn-warning{background:var(--warning);color:#fff;border-color:var(--warning)}.btn-warning:hover{background:#A86500;color:#fff}
.btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--border)}.btn-ghost:hover{background:var(--surface);color:var(--text)}
.btn-sm{font-size:.72rem;padding:.3rem .65rem;border-radius:6px}.btn-xs{font-size:.66rem;padding:.2rem .45rem;border-radius:4px}
.btn-icon{width:30px;height:30px;padding:0;justify-content:center;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--surface);color:var(--text-muted)}.btn-icon:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs);transition:box-shadow .15s}
.card-header{font-family:var(--font-h);font-weight:700;font-size:.8rem;background:transparent;border-bottom:1px solid var(--border-light);padding:.65rem .9rem;display:flex;align-items:center;justify-content:space-between}
.card-body{padding:.9rem}

/* Stats */
.stat-card{background:var(--surface);border-radius:var(--radius-lg);padding:.8rem .9rem;box-shadow:var(--shadow-xs);display:flex;align-items:center;gap:.75rem;border:1px solid var(--border-light);transition:all .15s}
.stat-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.stat-icon{width:38px;height:38px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.stat-value{font-family:var(--font-h);font-weight:800;font-size:1.25rem;color:var(--ink);line-height:1}
.stat-label{font-size:.67rem;color:var(--text-muted);margin-top:1px}

/* Tables */
.hub-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.8rem}
.hub-table thead th{font-family:var(--font-h);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);padding:.55rem .75rem;border-bottom:2px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:5;white-space:nowrap}
.hub-table tbody tr{transition:background .1s}.hub-table tbody tr:hover{background:var(--primary-light)}
.hub-table tbody td{padding:.5rem .75rem;border-bottom:1px solid var(--border-light);vertical-align:middle;color:var(--text)}
.hub-table-wrap{background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-xs);border:1px solid var(--border-light)}
@media(max-width:992px){.hub-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* Badges */
.badge-pill{font-family:var(--font-h);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.25px;padding:2.5px 8px;border-radius:var(--radius-full);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.badge-green{background:var(--green-light);color:var(--green-dark)}.badge-yellow{background:var(--yellow-light);color:#7A5E00}.badge-blue{background:var(--info-light);color:#14509E}.badge-indigo{background:#E0E7FF;color:#3730A3}.badge-pink{background:#FCE7F3;color:#9D174D}.badge-amber{background:#FEF3C7;color:#7A5E00}.badge-orange{background:#FFF7ED;color:#9A3412}.badge-red{background:var(--danger-light);color:var(--danger)}.badge-teal{background:var(--accent-light);color:var(--accent-dark)}.badge-sky{background:var(--primary-light);color:var(--primary-dark)}

/* Filters */
.filter-bar{background:var(--surface);border-radius:var(--radius-lg);padding:.65rem .9rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;box-shadow:var(--shadow-xs);border:1px solid var(--border-light);margin-bottom:1rem}
.filter-group label{display:block;font-family:var(--font-h);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:2px}
.filter-bar select,.filter-bar input[type="text"],.filter-bar input[type="search"],.filter-bar input[type="date"]{font-size:.78rem;border:1.5px solid var(--border);border-radius:6px;padding:.35rem .6rem;color:var(--text);background:var(--surface);transition:all .12s}
.filter-bar select:focus,.filter-bar input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(43,125,206,.1)}

/* Page Header */
.page-header{margin-bottom:1.1rem}.page-header h2{display:flex;align-items:center;gap:.4rem;margin-bottom:.15rem;font-size:1.1rem}.page-header h2 i{color:var(--primary);font-size:.95rem}.page-header p{font-size:.8rem;color:var(--text-muted);max-width:550px}

/* Forms */
.form-control,.form-select{font-family:var(--font-b);font-size:.8rem;border:1.5px solid var(--border);border-radius:var(--radius);padding:.42rem .7rem;color:var(--text);transition:all .12s}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(43,125,206,.1)}
.form-label{font-family:var(--font-h);font-weight:600;font-size:.75rem;color:var(--text);margin-bottom:.15rem}
.form-control-sm,.form-select-sm{font-size:.75rem;padding:.3rem .55rem}

/* Alerts */
.alert-hub{border-radius:var(--radius);padding:.6rem .85rem;font-size:.8rem;display:flex;align-items:flex-start;gap:.5rem;border:1px solid transparent}.alert-hub i{margin-top:1px;flex-shrink:0}
.alert-success-hub{background:var(--success-light);border-color:var(--accent-muted);color:#0A5C49}
.alert-warning-hub{background:var(--warning-light);border-color:var(--yellow-muted);color:#7A5E00}
.alert-danger-hub{background:var(--danger-light);border-color:#F0B0B0;color:#8B1C1C}
.alert-info-hub{background:var(--info-light);border-color:var(--primary-muted);color:#14509E}

/* Tabs */
.nav-tabs-hub{border-bottom:2px solid var(--border-light);display:flex;gap:0;margin-bottom:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav-tabs-hub .nav-link{font-family:var(--font-h);font-weight:600;font-size:.75rem;color:var(--text-muted);padding:.5rem .85rem;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .12s;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.nav-tabs-hub .nav-link:hover{color:var(--primary);border-bottom-color:var(--primary-muted)}.nav-tabs-hub .nav-link.active{color:var(--primary);border-bottom-color:var(--primary)}

/* Layout */
.top-navbar{background:var(--surface);border-bottom:1px solid var(--border);padding:.35rem 1rem;display:flex;align-items:center;justify-content:space-between}
.top-navbar .breadcrumb{margin-bottom:0;font-family:var(--font-h);font-size:.75rem}.top-navbar .breadcrumb-item a{color:var(--text-muted)}.top-navbar .breadcrumb-item.active{color:var(--primary);font-weight:600}
.top-nav-actions{display:flex;align-items:center;gap:.4rem}.top-nav-actions a{color:var(--text-muted);font-size:.95rem;padding:2px;transition:color .12s}.top-nav-actions a:hover{color:var(--primary)}

#wrapper{display:flex;width:100%}
#sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);max-width:var(--sidebar-w);height:100vh;position:fixed;z-index:1000;display:flex;flex-direction:column;transition:transform .2s ease}
#main-content{width:calc(100% - var(--sidebar-w));margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;transition:margin .2s ease}
#app-content{padding:1.1rem}
@media(min-width:1400px){#app-content{padding:1.25rem 1.75rem}}

/* Responsive */
@media(max-width:991px){
  :root{--sidebar-w:192px}
  #sidebar{transform:translateX(-100%);width:210px;min-width:210px;max-width:210px}
  #sidebar.active{transform:translateX(0);box-shadow:var(--shadow-lg)}
  #main-content{width:100%;margin-left:0}
  .grid-2{grid-template-columns:1fr!important}
  .grid-3{grid-template-columns:1fr 1fr!important}
  .grid-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:575px){
  #app-content{padding:.65rem}
  .grid-3,.grid-stats{grid-template-columns:1fr!important}
  .page-header h2{font-size:.95rem}
  .page-header p{font-size:.75rem}
  .filter-bar{flex-direction:column;align-items:stretch;padding:.5rem .65rem}
  .filter-bar select,.filter-bar input{width:100%}
  .stat-card{padding:.6rem .75rem}
  .stat-value{font-size:1.05rem}
  .stat-icon{width:32px;height:32px;font-size:.85rem}
  .hub-table thead th,.hub-table tbody td{padding:.4rem .5rem;font-size:.72rem}
  .card-body{padding:.65rem}
  .card-header{padding:.5rem .65rem;font-size:.75rem}
  .btn{font-size:.72rem;padding:.32rem .6rem}
  .nav-tabs-hub .nav-link{padding:.4rem .6rem;font-size:.7rem}
}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(11,18,34,.45);z-index:999}
@media(max-width:991px){.sidebar-backdrop.active{display:block}}

/* Grids */
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-bottom:1rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}

/* Utilities */
.empty-state{text-align:center;padding:2rem 1.25rem}.empty-state i{font-size:1.8rem;color:var(--border);margin-bottom:.6rem;display:block}.empty-state h4{color:var(--text);margin-bottom:.2rem;font-size:.85rem}.empty-state p{color:var(--text-muted);font-size:.78rem;max-width:320px;margin:0 auto}
.hover-lift{transition:transform .12s,box-shadow .12s}.hover-lift:hover{transform:translateY(-1px);box-shadow:var(--shadow)}

/* Process / Workflow */
.workflow-stage{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:.75rem;transition:all .12s}.workflow-stage:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.workflow-arrow{display:flex;align-items:center;justify-content:center;padding:.25rem 0;color:var(--text-muted)}.workflow-arrow i{font-size:.9rem}
.form-preview-field{background:var(--bg);border:1px dashed var(--border);border-radius:var(--radius);padding:.55rem;margin-bottom:.35rem;position:relative}.form-preview-field:hover{border-color:var(--primary);background:var(--primary-light)}
.form-preview-field .field-actions{position:absolute;top:.35rem;right:.35rem;display:none;gap:.2rem}.form-preview-field:hover .field-actions{display:flex}
.process-card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:.9rem;transition:all .15s;cursor:pointer;text-decoration:none;color:inherit;display:block}.process-card:hover{box-shadow:var(--shadow);transform:translateY(-1px);border-color:var(--primary);color:inherit}
.process-card .process-icon{width:38px;height:38px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.05rem;margin-bottom:.5rem}

/* Certificate */
.cert-frame{border:2px solid var(--primary);border-radius:var(--radius-xl);padding:1.5rem;background:linear-gradient(135deg,#fff 0%,var(--primary-light) 100%);position:relative;overflow:hidden}
.cert-frame::before{content:'';position:absolute;top:-25px;right:-25px;width:80px;height:80px;border:14px solid rgba(43,125,206,.04);border-radius:50%}
.cert-seal{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;box-shadow:0 3px 8px rgba(43,125,206,.25)}

/* Quill */
.ql-container{border-radius:0 0 var(--radius) var(--radius)!important;border-color:var(--border)!important;font-family:var(--font-b)!important;font-size:.82rem!important}
.ql-toolbar{border-radius:var(--radius) var(--radius) 0 0!important;border-color:var(--border)!important;background:var(--bg)!important}
.ql-editor{min-height:90px}

/* Timeline */
.timeline-item{position:relative;padding-left:1.5rem;padding-bottom:.9rem;border-left:2px solid var(--border)}
.timeline-item:last-child{border-left-color:transparent;padding-bottom:0}
.timeline-item::before{content:'';position:absolute;left:-4.5px;top:2px;width:7px;height:7px;border-radius:50%;background:var(--primary);border:1.5px solid var(--surface)}
.timeline-item.success::before{background:var(--green)}.timeline-item.danger::before{background:var(--danger)}.timeline-item.warning::before{background:var(--warning)}

/* Pagination */
.pagination .page-link{font-family:var(--font-h);font-weight:600;font-size:.72rem;color:var(--primary);border-color:var(--border);border-radius:5px!important;margin:0 1px;padding:.25rem .5rem}
.pagination .page-item.active .page-link{background:var(--primary);border-color:var(--primary);color:#fff}