/* =====================================================================
   BRTL ERP — admin theme (green sidebar / blue topbar)
   Legacy AdminLTE-style look: green sidebar, blue topbar, grey canvas.
   Class names used across all apps (card, data-table, btn, badge,
   form-group, kpi-value, status-banner …) are kept for compatibility.
   ===================================================================== */
:root{
  --green:#00a65a; --green-dark:#008d4c; --green-deeper:#3d8a6f; --green-sub:#2e8b6a;
  --blue:#3c8dbc;  --blue-dark:#367fa9;  --blue-deep:#0073b7;
  --orange:#f39c12; --red:#dd4b39; --aqua:#00c0ef; --teal-btn:#00968a;
  --navy:#3c8dbc; --teal:#00968a;          /* old tokens remapped */
  --bg:#ecf0f5; --headline:#333; --body-text:#555; --muted:#888;
  --border:#d2d6de; --white:#fff; --amber:#f39c12;
  --radius:3px; --sidebar-w:300px; --topbar-h:60px;
  --shadow:0 1px 1px rgba(0,0,0,.1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:'Source Sans 3','Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--headline);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{color:var(--headline);line-height:1.25;margin:0 0 .5rem;font-weight:600;}
h2{font-size:20px;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:#72afd2;}
button,input,select,textarea{font-family:inherit;font-size:inherit;}
.muted{color:var(--muted);}
.text-red{color:var(--red)!important;}.text-green{color:var(--green)!important;}.text-blue{color:var(--blue)!important;}

/* ---------------- shell ---------------- */
.app-shell{display:flex;min-height:100vh;}
.sidebar{width:var(--sidebar-w);background:var(--green);color:#fff;position:fixed;top:0;left:0;bottom:0;
  display:flex;flex-direction:column;z-index:40;transition:transform .25s ease,width .25s ease;}
.sidebar .brand{height:var(--topbar-h);display:flex;align-items:center;justify-content:center;
  background:var(--blue-dark);color:#fff;font-size:26px;font-weight:400;letter-spacing:.2px;flex:none;}
.sidebar .brand:hover{color:#fff;background:#357ca5;}
.sidebar .brand-mini{display:none;font-weight:700;font-size:16px;}
.sidebar .brand-full{display:flex;align-items:center;gap:10px;font-weight:600;}
.sidebar .brand-logo{height:30px;width:auto;}
.user-panel{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--green-sub);flex:none;}
.user-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#fff;padding:2px;}
.user-name{font-weight:600;font-size:17px;}
.user-status{font-size:14px;opacity:.95;}
.user-status .fa{color:#3c763d;font-size:12px;}
.sidebar-menu{flex:1;overflow-y:auto;padding:4px 0 30px;}
.sidebar-menu ul{list-style:none;margin:0;padding:0;}
.sidebar-menu > ul > li > a{display:flex;align-items:center;gap:12px;padding:15px 22px;color:#fff;
  font-weight:600;font-size:17px;border-left:3px solid transparent;}
.sidebar-menu > ul > li > a:hover,.sidebar-menu > ul > li.active > a{background:var(--green-dark);color:#fff;border-left-color:#fff;}
.sidebar-menu .caret{margin-left:auto;transition:transform .2s;font-size:16px;}
.sidebar-menu .menu-open > a .caret{transform:rotate(-90deg);}
.treeview-menu{display:none;background:var(--green-deeper);padding:4px 0!important;}
.menu-open > .treeview-menu{display:block;}
.treeview-menu a{display:flex;align-items:center;gap:8px;padding:9px 18px 9px 44px;color:#e8f6ef;font-weight:600;font-size:16px;}
.treeview-menu a:hover,.treeview-menu li.active > a{color:#fff;background:rgba(0,0,0,.08);}
.treeview-menu li.active > a{box-shadow:inset 3px 0 0 #fff;}
.sidebar-menu .fa-fw{width:20px;text-align:center;}

.content{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column;transition:margin-left .25s ease;}
.topbar{height:var(--topbar-h);background:var(--blue);color:#fff;display:flex;align-items:center;
  justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:30;}
.topbar .left,.topbar .right{display:flex;align-items:center;gap:14px;}
.menu-toggle{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;padding:8px 10px;border-radius:3px;}
.menu-toggle:hover{background:var(--blue-dark);}
.company-switch{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border-radius:3px;padding:4px 10px;}
.company-switch select{background:transparent;border:0;color:#fff;font-weight:600;}
.company-switch option{color:#333;}
.dropdown{position:relative;}
.user-btn{display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;cursor:pointer;padding:6px 10px;border-radius:3px;font-size:16px;}
.user-btn:hover{background:var(--blue-dark);}
.user-btn img{width:30px;height:30px;border-radius:50%;background:#fff;object-fit:cover;}
.dropdown-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);background:#fff;min-width:210px;
  border:1px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,.15);border-radius:3px;overflow:hidden;}
.dropdown.open .dropdown-menu{display:block;}
.dropdown-menu .dd-head{background:var(--blue);color:#fff;padding:12px 14px;font-weight:600;}
.dropdown-menu .dd-head small{display:block;font-weight:400;opacity:.85;}
.dropdown-menu a,.dropdown-menu button{display:block;width:100%;text-align:left;padding:10px 14px;color:#444;background:none;border:0;cursor:pointer;font-size:14.5px;}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:#f4f4f4;}

/* collapsed sidebar (desktop) */
body.sidebar-collapse .sidebar{width:60px;}
body.sidebar-collapse .content{margin-left:60px;}
body.sidebar-collapse .brand-full,body.sidebar-collapse .user-info,body.sidebar-collapse .sidebar-menu span,
body.sidebar-collapse .sidebar-menu .caret,body.sidebar-collapse .treeview-menu{display:none!important;}
body.sidebar-collapse .brand-mini{display:inline;}
body.sidebar-collapse .user-panel{padding:10px 6px;justify-content:center;}
body.sidebar-collapse .user-avatar img{width:36px;height:36px;}
body.sidebar-collapse .sidebar-menu > ul > li > a{justify-content:center;padding:14px 0;}

.content-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px;padding:20px 20px 0;}
.content-header h1{font-size:30px;font-weight:400;margin:0;}
.content-header h1 small{font-size:19px;color:#777;font-weight:400;margin-left:6px;}
.breadcrumb{list-style:none;margin:0;padding:0;display:flex;gap:6px;font-size:15px;color:#777;}
.breadcrumb a{color:#444;}
.breadcrumb li + li:before{content:">";color:#ccc;margin-right:6px;}
.page-body{padding:20px;width:100%;flex:1;}
.main-footer{background:#fff;border-top:1px solid var(--border);padding:16px 20px;color:#444;font-size:16px;}
.main-footer a{color:#00ff00;color:#16c60c;font-weight:700;}

/* ---------------- AdminLTE widgets ---------------- */
.small-box-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:24px;}
.small-box{position:relative;display:block;border-radius:2px;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.18);overflow:hidden;}
.small-box .inner{padding:12px 14px 18px;position:relative;z-index:1;}
.small-box h3{font-size:46px;font-weight:700;margin:0 0 6px;color:#fff;line-height:1.1;}
.small-box p{margin:0;font-size:19px;}
.small-box .icon{position:absolute;top:14px;right:14px;font-size:90px;color:rgba(0,0,0,.15);transition:transform .3s;}
.small-box:hover .icon{transform:scale(1.08);}
.small-box .small-box-footer{display:block;text-align:center;padding:5px 0;color:rgba(255,255,255,.9);background:rgba(0,0,0,.1);font-size:17px;position:relative;z-index:1;}
.small-box:hover .small-box-footer{color:#fff;background:rgba(0,0,0,.15);}
.bg-orange{background:var(--orange)!important;}.bg-green{background:var(--green)!important;}
.bg-red{background:var(--red)!important;}.bg-blue{background:var(--blue-deep)!important;}
.bg-aqua{background:var(--aqua)!important;}.bg-purple{background:#605ca8!important;}

.info-box-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;max-width:1460px;margin-bottom:24px;}
.info-box{display:flex;min-height:120px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.08);border-radius:2px;color:inherit;}
.info-box-icon{width:120px;display:flex;align-items:center;justify-content:center;font-size:56px;color:#fff;flex:none;}
.info-box-content{padding:8px 14px;}
.info-box-text{text-transform:uppercase;font-size:18px;color:#333;display:block;}
.info-box-number{font-size:26px;font-weight:700;display:block;}

.box{position:relative;background:#fff;border-top:3px solid #d2d6de;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.12);margin-bottom:20px;width:100%;}
.box.box-success{border-top-color:var(--green);}.box.box-primary{border-top-color:var(--blue);}
.box.box-narrow{max-width:1420px;}
.box-header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:14px 16px;}
.box-title{font-size:20px;font-weight:600;margin:0;color:#333;}
.box-title.total{color:var(--green);font-size:22px;}
.box-title .num{color:var(--red);}
.box-title.blue-num .num{color:var(--blue-deep);}
.box-link{font-size:19px;font-weight:700;color:var(--blue);}
.box-link .fa{margin-right:4px;}
.box-body{padding:0 16px 16px;}
.box-footer{border-top:1px solid #f4f4f4;padding:12px 16px;}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:3px;padding:7px 14px;font-weight:400;font-size:16px;
  border:1px solid transparent;cursor:pointer;line-height:1.3;color:#fff;background:#999;}
.btn:hover{filter:brightness(.93);color:#fff;}
.btn-primary,.btn-teal{background:var(--teal-btn);border-color:#00877c;color:#fff;}
.btn-green,.btn-success{background:var(--green);border-color:var(--green-dark);color:#fff;}
.btn-danger{background:var(--red);border-color:#d73925;color:#fff;}
.btn-info{background:var(--aqua);border-color:#00acd6;color:#fff;}
.btn-warning{background:var(--orange);border-color:#e08e0b;color:#fff;}
.btn-outline,.btn-default{background:#f4f4f4;border-color:#ddd;color:#444;}
.btn-outline:hover,.btn-default:hover{color:#333;}
.btn-sm{padding:4px 10px;font-size:14px;}
.btn-icon{width:48px;height:42px;padding:0;font-size:18px;}
.action-stack{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.action-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
form.inline{display:inline;margin:0;}

/* ---------------- cards (other modules) ---------------- */
.grid{display:grid;gap:18px;}
.grid-cols-4{grid-template-columns:repeat(4,1fr);}.grid-cols-3{grid-template-columns:repeat(3,1fr);}.grid-cols-2{grid-template-columns:repeat(2,1fr);}
.dash-layout{grid-template-columns:2.4fr 1fr;align-items:start;}
.card{background:#fff;border-top:3px solid var(--green);border-radius:3px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.12);color:inherit;display:block;}
.card-title{font-size:13px;color:#666;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.4rem;}
.kpi-value{font-size:30px;font-weight:700;color:#333;}
.kpi-unit{font-size:14px;font-weight:400;color:#666;margin-left:.25rem;}
.progress{height:8px;border-radius:99px;background:#e5e5e5;overflow:hidden;margin:.5rem 0;}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--aqua),var(--green));}
.status-banner{border-radius:3px;padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.2rem;border:1px solid var(--border);}
.status-banner.green{background:#e8f8ef;border-color:#9fdcbb;}.status-banner.amber{background:#fff7e6;border-color:#f8d48a;}.status-banner.red{background:#fdecea;border-color:#f3b0a7;}
.status-banner .status-title{font-weight:700;font-size:16px;display:flex;align-items:center;gap:.4rem;}
.status-banner.green .status-title{color:var(--green);}.status-banner.amber .status-title{color:var(--orange);}.status-banner.red .status-title{color:var(--red);}
.panel{margin-bottom:1.1rem;}.panel-list{display:flex;flex-direction:column;gap:.6rem;}
.panel-item{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .7rem;border:1px solid #eee;border-radius:3px;font-size:14px;}

/* ---------------- tables ---------------- */
.table-wrap{overflow-x:auto;}
table.data-table{width:100%;border-collapse:collapse;font-size:15.5px;}
table.data-table th{text-align:left;color:#333;font-weight:700;padding:10px 8px;border-bottom:2px solid #f4f4f4;vertical-align:bottom;position:relative;}
table.data-table td{padding:10px 8px;border-top:1px solid #f4f4f4;vertical-align:top;}
table.data-table.striped tbody tr:nth-child(odd) td{background:#f9f9f9;}
table.data-table tbody tr:hover td{background:#f5f5f5;}
table.data-table.bordered th,table.data-table.bordered td{border:1px solid #f4f4f4;}
table.data-table th.sortable{cursor:pointer;padding-right:26px;user-select:none;}
table.data-table th.sortable:after{content:"\f0dc";font-family:FontAwesome;position:absolute;right:8px;bottom:11px;color:#ccc;}
table.data-table th.sort-asc:after{content:"\f0de";color:#888;}table.data-table th.sort-desc:after{content:"\f0dd";color:#888;}
td.empty{text-align:center;color:var(--red);}
.thumb{height:auto;max-height:90px;object-fit:cover;border:1px solid #eee;border-radius:2px;background:#fafafa;}
.dt-top,.dt-bottom{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:10px 0;}
.dt-top select,.dt-top input{border:1px solid var(--border);padding:6px 10px;border-radius:2px;background:#fff;}
.dt-top input{min-width:220px;}
.dt-pager{display:flex;}
.dt-pager button{border:1px solid #ddd;background:#fff;color:#666;padding:7px 14px;margin-left:-1px;cursor:pointer;font-size:15px;}
.dt-pager button.cur{background:var(--blue);border-color:var(--blue);color:#fff;}
.dt-pager button:disabled{color:#bbb;cursor:default;}
.dt-pager button:first-child{border-radius:3px 0 0 3px;}.dt-pager button:last-child{border-radius:0 3px 3px 0;}

.badge{display:inline-flex;align-items:center;gap:.3rem;padding:2px 8px;border-radius:10px;font-size:12.5px;font-weight:700;}
.badge.green{background:#dff5e9;color:var(--green-dark);}.badge.amber{background:#fff1d6;color:#b06f00;}
.badge.red{background:#fde3df;color:#c23321;}.badge.grey{background:#eee;color:#666;}.badge.blue{background:#dcecf6;color:var(--blue-dark);}

/* ---------------- forms ---------------- */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px;}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.form-group label,.form-label{font-size:16.5px;font-weight:700;color:#333;}
.form-group input:not([type=checkbox]):not([type=radio]):not([type=file]),.form-group select,.form-group textarea,.form-control{
  width:100%;padding:9px 14px;border:1px solid var(--border);border-radius:0;background:#fff;color:#333;font-size:16px;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus,.form-control:focus{outline:none;border-color:var(--blue);}
.form-group .help,.helptext{font-size:13px;color:#888;}
.errorlist{list-style:none;margin:2px 0 0;padding:0;color:var(--red);font-size:14px;}
.form-errors{background:#fde3df;border:1px solid #f3b0a7;color:#a12a1b;padding:10px 14px;margin-bottom:14px;}
.checkbox-inline{display:flex;align-items:center;gap:8px;font-weight:600;}

.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;}
.filters input,.filters select{padding:6px 10px;border:1px solid var(--border);font-size:14px;background:#fff;}

.messages{margin-bottom:14px;}
.msg{position:relative;padding:12px 40px 12px 16px;border-radius:3px;margin-bottom:8px;font-size:15.5px;color:#fff;}
.msg.success{background:var(--green);}.msg.error{background:var(--red);}.msg.warning{background:var(--orange);}.msg.info{background:var(--aqua);}
.msg-close{position:absolute;right:10px;top:8px;background:none;border:0;color:#fff;font-size:22px;cursor:pointer;opacity:.8;}

/* ---------------- POS ---------------- */
.pos-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;}
.pos-main{padding-right:20px;border-right:2px solid #ddd;}
.pos-side{padding-left:24px;}
.pos-head{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:20px;align-items:end;margin-bottom:16px;}
.pos-radio{display:flex;flex-direction:column;gap:8px;font-weight:700;}
table.pos-lines th{font-size:17px;}
table.pos-lines td{background:#f7f7f7;border-top:0;padding:10px 6px;}
.totals-table{width:100%;border-collapse:collapse;}
.totals-table td{padding:12px 6px;border-bottom:1px solid #eee;font-size:17px;}
.totals-table td:first-child{font-weight:700;width:90px;}

/* ---------------- login ---------------- */
.login-page{background:#fff;min-height:100vh;}
.login-top{background:#4caf50;height:63px;display:flex;align-items:center;justify-content:flex-end;padding:0 90px;gap:40px;}
.login-top a{color:#fff;font-size:20px;}
.login-logo{position:absolute;left:64px;top:35px;background:#fff;padding:2px 14px 6px;text-align:center;}
.login-logo img{height:80px;}
.login-logo .tag{font-size:10px;color:#7cb342;}
.login-box{max-width:624px;margin:100px auto 40px;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.22);overflow:hidden;}
.login-box .lb-head{background:#009688;color:#fff;text-align:center;padding:18px;font-size:21px;}
.login-box form{padding:14px 40px 56px;}
.input-addon{position:relative;margin-bottom:20px;}
.input-addon input{width:100%;padding:11px 90px 11px 16px;border:1px solid #ccc;border-radius:3px;font-size:18px;}
.input-addon .addon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#555;background:none;border:0;cursor:pointer;font-size:18px;}
.input-addon .addon.show-pw{color:#ef6c00;}
.login-actions{display:flex;justify-content:space-between;align-items:center;}
.login-actions label{display:flex;align-items:center;gap:8px;font-size:18px;color:#555;}
.login-actions .btn{min-width:152px;font-size:18px;background:#009688;padding:10px 20px;}

/* ---------------- responsive ---------------- */
@media (max-width:1400px){.small-box-grid{gap:20px;}.info-box-grid{gap:20px;}}
@media (max-width:1200px){.small-box-grid{grid-template-columns:repeat(2,1fr);}.pos-wrap{grid-template-columns:1fr;}
  .pos-main{border-right:0;padding-right:0;}.pos-side{padding-left:0;margin-top:20px;max-width:420px;}.dash-layout{grid-template-columns:1fr;}
  .grid-cols-4{grid-template-columns:repeat(2,1fr);}.grid-cols-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:860px){
  :root{--sidebar-w:270px;}
  .sidebar{transform:translateX(-100%);}
  body.sidebar-open .sidebar{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.35);}
  .content,body.sidebar-collapse .content{margin-left:0;}
  body.sidebar-collapse .sidebar{width:var(--sidebar-w);}
  .info-box-grid{grid-template-columns:1fr;}
  .form-grid,.pos-head{grid-template-columns:1fr;}
  .content-header h1{font-size:24px;}
  .login-logo{position:static;margin:10px auto 0;display:block;width:max-content;}
  .login-top{padding:0 20px;}
  .login-box{margin:30px 14px;}
  .login-box form{padding:14px 18px 30px;}
}
@media (max-width:560px){.small-box-grid,.grid-cols-4,.grid-cols-3,.grid-cols-2{grid-template-columns:1fr;}
  .page-body{padding:12px;}.small-box h3{font-size:38px;}.box-link{font-size:16px;}}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:35;}
body.sidebar-open .sidebar-overlay{display:block;}
@media (min-width:861px){body.sidebar-open .sidebar-overlay{display:none;}}
@media print{.sidebar,.topbar,.main-footer,.dt-top,.dt-bottom,.no-print{display:none!important;}.content{margin:0!important;}}

/* ===================== Tracking System theme & widgets ===================== */
.theme-tracking .sidebar{background:#2c5a75;}
.theme-tracking .user-panel{background:#244d64;}
.theme-tracking .sidebar-menu > ul > li > a:hover,.theme-tracking .sidebar-menu > ul > li.active > a{background:#1f4357;}
.avatar-letter{width:44px;height:44px;border-radius:50%;background:#fff;color:#2c5a75;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;}
.avatar-letter.sm{width:30px;height:30px;font-size:15px;vertical-align:middle;margin-right:6px;}
.topbar-user{font-size:16px;color:#fff;}
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:4px;padding:5px 10px;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;}
.pill-green{background:var(--green);}.pill-red{background:var(--red);}.pill-amber{background:var(--orange);}
.cert-link{display:inline-block;margin-top:6px;font-size:13.5px;font-weight:700;color:var(--green-dark);}
.step-chip{display:inline-block;background:#00968a;color:#fff;border-radius:4px;padding:7px 14px;font-weight:600;white-space:nowrap;}
.step-chip.doing{background:var(--orange);}.step-chip:not(.done):not(.doing){background:#8a9aa6;}
.status-select{border:0;border-radius:4px;color:#fff;padding:8px 10px;font-weight:600;background:#00968a;cursor:pointer;min-width:140px;}
.status-select.st-pending{background:#8a9aa6;}.status-select.st-in-progress{background:var(--orange);}
.status-select option{color:#333;background:#fff;}
.linkbtn{background:none;border:0;cursor:pointer;font-family:inherit;padding:0;}
.note-item{border-left:3px solid #00968a;background:#f6faf9;padding:6px 10px;margin:6px 0;font-size:14px;}
.stage-bar{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f0f0f0;}
.stage-bar b{color:var(--green-dark);}
.track-title{text-align:center;color:#1e7e4a;font-size:24px;margin:6px 0 10px;letter-spacing:.3px;}
.track-progress{max-width:520px;margin:0 auto 18px;text-align:center;color:#666;font-size:14px;}
.track-grid{display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;gap:34px 64px;padding:10px 0 20px;}
.track-card{position:relative;background:#f8fafc;border:1px solid #e3e8ee;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.06);padding:18px 22px 20px;}
.track-card:not(:nth-child(3n)):after{content:"\f061";font-family:FontAwesome;position:absolute;right:-44px;top:50%;color:#9aa8b6;font-size:22px;}
.track-card h4{text-align:center;font-size:15px;letter-spacing:.4px;border-bottom:1px dashed #ccd5de;padding-bottom:10px;margin:0 0 12px;}
.tc-num{position:absolute;left:12px;top:12px;width:24px;height:24px;border-radius:50%;background:#cfd8e0;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.track-card.done .tc-num{background:var(--green);}.track-card.doing .tc-num{background:var(--orange);}
.tc-status{color:#2a6fb0;font-weight:700;margin-bottom:6px;}
.track-card.done .tc-status{color:#1e7e4a;}.track-card.todo{opacity:.75;}
.tc-meta{font-size:13.5px;color:#444;line-height:1.55;}
.tc-more{margin-top:10px;text-align:center;}
.tc-more summary{display:inline-block;background:#00968a;color:#fff;border-radius:4px;padding:5px 14px;cursor:pointer;font-size:14px;list-style:none;}
.tc-more summary::-webkit-details-marker{display:none;}
.tc-more[open] summary{margin-bottom:6px;}
.tc-more .note-item{text-align:left;}
.tc-nomore{display:block;text-align:center;margin-top:10px;color:#aaa;font-size:13px;}
.cert-banner{display:flex;align-items:center;gap:14px;max-width:720px;margin:0 auto 22px;background:#e8f8ef;border:1px solid #9fdcbb;border-radius:10px;padding:12px 16px;}
.cert-banner .fa-certificate{font-size:30px;color:var(--green);}
.cert-banner div{flex:1;}.cert-banner span{color:#555;font-size:14px;}
@media (max-width:1100px){.track-grid{grid-template-columns:repeat(2,minmax(0,300px));gap:24px;}.track-card:after{display:none;}}
@media (max-width:620px){.track-grid{grid-template-columns:1fr;}}

/* ===================== EPR Compliance Dashboard (guideline layout) ===================== */
.epr-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px;}
.epr-tabs{display:flex;flex-wrap:wrap;gap:4px;background:#fff;border-radius:6px;padding:5px;box-shadow:0 1px 3px rgba(0,0,0,.08);}
.epr-tabs a{padding:8px 16px;border-radius:5px;color:#334;font-weight:600;font-size:15.5px;}
.epr-tabs a:hover{background:#f1f5f9;color:#111;}
.epr-tabs a.on{background:#1f5f8b;color:#fff;}
.epr-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.epr-controls select{border:1px solid var(--border);padding:8px 10px;border-radius:4px;background:#fff;}
.seg{display:inline-flex;background:#eef2f5;border-radius:20px;padding:3px;}
.seg button{border:0;background:none;padding:6px 14px;border-radius:16px;cursor:pointer;font-family:inherit;color:#555;}
.seg button.on{background:#fff;color:#1f5f8b;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.1);}
.epr-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;}
.kpi-strip{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr;gap:0;border-top:0;padding:0;}
.kpi-cell{padding:18px 20px;border-right:1px solid #eef1f4;}
.kpi-label{font-size:14px;font-weight:700;color:#444;margin-bottom:6px;}
.kpi-big{font-size:38px;font-weight:600;color:#1f2d3d;line-height:1.1;}
.kpi-big small{font-size:16px;color:#888;}
.kpi-foot{font-size:13px;color:#888;margin-top:6px;}
.bar{position:relative;height:9px;background:#e6ebef;border-radius:9px;margin-top:8px;}
.bar span{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#00a65a,#5fd38d);}
.bar.teal span{background:linear-gradient(90deg,#3c8dbc,#00c0ef);}
.bar.big{height:14px;margin:12px 0 6px;}
.bar.big.green span{background:linear-gradient(90deg,#00a65a,#9be15d);}
.bar i{position:absolute;top:-3px;bottom:-3px;width:2px;background:#1f2d3d;opacity:.45;}
.kpi-status{margin:12px;border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:4px;}
.kpi-status .st-title{font-size:18px;font-weight:700;}
.kpi-status small{color:#666;}
.st-green{background:#e8f8ef;color:#00804f;}.st-amber{background:#fff4dc;color:#a76a00;}.st-red{background:#fdecea;color:#b0281a;}
.epr-two{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;}
.chip{background:#eef2f5;border-radius:12px;padding:3px 10px;font-weight:700;font-size:14px;}
.row-sb{display:flex;justify-content:space-between;}
.chart-title{margin:18px 0 6px;font-size:16px;}
.chart{position:relative;height:190px;display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;padding:0 2px 22px;border-bottom:1px solid #e3e8ec;}
.chart .col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;}
.chart .col span{position:absolute;bottom:-21px;font-size:12px;color:#777;}
.chart .bar-v{width:70%;min-height:2px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#3fa9e0,#1f78b4);}
.chart .bar-v.hit{background:linear-gradient(180deg,#5fd38d,#00a65a);}
.chart .col.active .bar-v{outline:2px solid #1f5f8b;outline-offset:1px;}
.target-line{position:absolute;left:0;right:0;border-top:2px dashed #f39c12;z-index:1;margin-bottom:22px;}
.tasks .task{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f0f2f4;}
.tasks .task small{display:block;color:#888;font-size:12.5px;}
.side-k{font-size:13px;color:#888;text-transform:uppercase;letter-spacing:.05em;}
.side-v{font-weight:700;margin-bottom:8px;}
.side-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;margin:6px 0;border:1px solid #eef1f4;border-radius:6px;color:inherit;font-size:14.5px;}
a.side-row:hover{background:#f7fafc;}
.sdg-row{margin-top:8px;font-size:13px;color:#1f5f8b;font-weight:700;}
.future div{display:flex;align-items:center;gap:8px;padding:6px 0;color:#555;}
.future .badge{margin-left:auto;}
@media (max-width:1300px){.epr-grid{grid-template-columns:1fr;}.kpi-strip{grid-template-columns:1fr 1fr;}.kpi-cell{border-bottom:1px solid #eef1f4;}}
@media (max-width:900px){.epr-two{grid-template-columns:1fr;}}
@media (max-width:560px){.kpi-strip{grid-template-columns:1fr;}}

/* ===================== Role permission matrix ===================== */
.perm-matrix th,.perm-matrix td{text-align:center;vertical-align:middle;}
.perm-matrix .feat-col{text-align:left;min-width:220px;position:sticky;left:0;background:#fff;z-index:1;}
.perm-matrix small{display:block;color:#999;font-weight:400;font-size:11.5px;}
.perm-matrix .role-col{min-width:110px;font-size:14px;}
.perm-matrix .col-tools{display:block;font-size:12px;font-weight:400;margin-top:4px;}
.perm-matrix .col-tools .linkbtn{color:var(--blue);font-size:12px;}
.perm-matrix tr.grp td{background:#eef6f1;text-align:left;font-weight:700;color:var(--green-dark);}
.tick{display:inline-block;cursor:pointer;position:relative;}
.tick input{position:absolute;opacity:0;}
.tick span{display:inline-block;width:22px;height:22px;border:2px solid #c8d1d8;border-radius:5px;background:#fff;transition:.15s;}
.tick input:checked + span{background:var(--green);border-color:var(--green);}
.tick input:checked + span:after{content:"\f00c";font-family:FontAwesome;color:#fff;font-size:13px;line-height:18px;display:block;}
.tick input:disabled + span{opacity:.5;cursor:not-allowed;}
.tick input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px;}
.dash-layout > *,.grid > *,.epr-grid > *,.epr-two > *{min-width:0;}
.chart .bar-v{max-width:56px;}
.avatar-img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff;}
.avatar-img.sm{width:30px;height:30px;vertical-align:middle;margin-right:6px;}
.avatar-letter.lg,.profile-head .avatar-img{width:84px;height:84px;font-size:38px;}
.profile-head{display:flex;gap:18px;align-items:center;}
.link-card{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;}
.link-card > div{flex:1;min-width:0;}
.copy-row{display:flex;gap:6px;align-items:center;margin-bottom:8px;}
.copy-row small{min-width:90px;}
.qr{width:110px;height:110px;border:1px solid #eee;border-radius:6px;}