/* MBI-ARCIS-CSS-VERSION: 2026-09-16-kpi-tile-v1 -- jangan padam baris ini,
   digunakan untuk sahkan fail CSS betul-betul terkini bila muat naik semula. */
:root{
  --navy:#0A3D75; --navy-dark:#072B54; --orange:#F7941D; --orange-dark:#E67A0A;
  --bg:#F5F7FA; --surface:#FFFFFF; --ink:#16232F; --ink-soft:#5B6B7A; --line:#E4E9EF;
  --green:#2E9E6B; --amber:#B5760B; --red:#C4443A;
  --green-bg:#E3F3E8; --amber-bg:#FFF3DE; --red-bg:#FDE7E4;
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); font-size:14px;}
h1,h2,h3{font-family:'Poppins',system-ui,sans-serif;}
a{color:var(--navy); text-decoration:none;}

.app-shell{display:flex; min-height:100vh;}
.sidebar{width:230px; background:#fff; border-right:1px solid var(--line); padding:20px 0; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent;}
.sidebar::-webkit-scrollbar{width:6px;}
.sidebar::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}
.sidebar::-webkit-scrollbar-track{background:transparent;}
.sidebar .logo{padding:0 20px 20px; display:flex; align-items:center; gap:10px;}
.sidebar .logo .mark{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--navy),var(--orange)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;}
.sidebar .logo .name{font-weight:700; font-size:15px; color:var(--navy);}
.sidebar .logo .tagline{font-size:10px; color:var(--ink-soft);}
.nav-group{font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--ink-soft); text-transform:uppercase; padding:14px 20px 6px;}
.nav-item{display:flex; align-items:center; gap:11px; padding:8px 20px; color:var(--ink); font-size:13.5px;}
.nav-item.active{background:#FFF3E6; color:var(--orange-dark); font-weight:600; border-right:3px solid var(--orange);}
.nav-item:hover{background:var(--bg);}
.nav-icon{flex:0 0 auto; color:var(--ink-soft); opacity:.8;}
.nav-item.active .nav-icon{color:var(--orange-dark); opacity:1;}
.nav-item:hover .nav-icon{opacity:1;}

/* ======================================================================
   Kumpulan Sidebar Boleh Runtuh (Accordion) -- klik tajuk kumpulan
   (cth "RISK MANAGEMENT") untuk sembunyi/papar item di bawahnya.
   ====================================================================== */
.nav-group-toggle{display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none;}
.nav-group-toggle:hover{color:var(--navy);}
.nav-chevron{transition:transform .2s ease; flex-shrink:0; opacity:.6;}
.nav-section .nav-item{overflow:hidden; max-height:44px; opacity:1; transition:max-height .22s ease, opacity .18s ease, padding .22s ease;}
.nav-section.collapsed .nav-item{max-height:0; opacity:0; padding-top:0; padding-bottom:0; pointer-events:none;}
.nav-section.collapsed .nav-chevron{transform:rotate(-90deg);}


/* ======================================================================
   Layout Sidebar: Expand / Collapse / Hidden (Mobile & Tablet)
   ====================================================================== */
.sidebar{transition:width .22s ease;}
.hamburger-btn{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); border-radius:8px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; flex-shrink:0;}
.hamburger-btn:hover{background:rgba(255,255,255,.22);}
.sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(10,20,35,.45); z-index:998;}

/* Keadaan RUNTUH (ikon sahaja) -- togol manual pada desktop/tablet, disimpan localStorage */
body.sidebar-collapsed .sidebar{width:64px;}
body.sidebar-collapsed .sidebar .logo{padding:0 0 20px; justify-content:center;}
body.sidebar-collapsed .sidebar .logo .name,
body.sidebar-collapsed .sidebar .logo .tagline,
body.sidebar-collapsed .nav-group,
body.sidebar-collapsed .nav-label{display:none;}
body.sidebar-collapsed .nav-item{justify-content:center; padding:9px 0;}
body.sidebar-collapsed .nav-item.active{border-right:3px solid var(--orange);}

/* Tablet (cth iPad potret/landskap, 601px-1024px): RUNTUH secara lalai
   supaya kandungan utama dapat lebih ruang -- pengguna masih boleh togol
   kembali penuh guna butang hamburger (state override melalui localStorage
   sama seperti desktop, ATAS kelakuan lalai media query ini). */
@media (min-width:601px) and (max-width:1024px){
  body:not(.sidebar-expanded-override) .sidebar{width:64px;}
  body:not(.sidebar-expanded-override) .sidebar .logo{padding:0 0 20px; justify-content:center;}
  body:not(.sidebar-expanded-override) .sidebar .logo .name,
  body:not(.sidebar-expanded-override) .sidebar .logo .tagline,
  body:not(.sidebar-expanded-override) .nav-group,
  body:not(.sidebar-expanded-override) .nav-label{display:none;}
  body:not(.sidebar-expanded-override) .nav-item{justify-content:center; padding:9px 0;}
}

/* Mobile (telefon Android/iPhone, <=600px): sidebar TERSEMBUNYI sepenuhnya
   secara lalai (off-canvas) -- dibuka sebagai overlay penuh via hamburger. */
@media (max-width:600px){
  .app-shell{position:relative;}
  .sidebar{position:fixed; top:0; left:0; height:100vh; z-index:999; width:250px; max-width:82vw;
            transform:translateX(-100%); box-shadow:2px 0 18px rgba(0,0,0,.18); overflow-y:auto;}
  body.sidebar-mobile-open .sidebar{transform:translateX(0);}
  body.sidebar-mobile-open .sidebar-backdrop{display:block;}
  /* Pada mobile, sidebar SENTIASA penuh (ikon+label) bila dibuka -- lebih
     mudah disentuh (tap target) berbanding mod ikon-sahaja yang sesuai desktop/tablet. */
  .sidebar .logo .name, .sidebar .logo .tagline, .nav-group, .nav-label{display:block !important;}
  .nav-item{justify-content:flex-start !important; padding:9px 20px !important;}
  .topbar h1{font-size:16px;}
  .topbar-right{flex-wrap:wrap; gap:6px;}
}


.main{flex:1; min-width:0;}
.topbar{background:linear-gradient(120deg,var(--navy),var(--navy-dark) 60%, var(--orange-dark)); color:#fff; padding:18px 28px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:100;}
.topbar h1{margin:0; font-size:19px;}
.topbar .crumb{font-size:12px; opacity:.85; margin-top:2px;}
.topbar-right{display:flex; align-items:center; gap:10px;}
.pill-btn{background:var(--orange); color:#fff; border:none; padding:9px 16px; border-radius:999px; font-weight:600; font-size:13px; cursor:pointer;}
.pill-btn.ghost{background:rgba(255,255,255,.15); color:#fff;}
.pill-btn.outline{background:#fff; color:var(--navy); border:1px solid var(--line);}
.pill-btn.small{padding:6px 12px; font-size:12.5px;}
.avatar{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.25); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;}
.tenant-select{background:rgba(255,255,255,.15); color:#fff; border:none; padding:8px 12px; border-radius:999px; font-size:12.5px;}

.content{padding:24px 28px;}
.app-footer{display:flex; justify-content:space-between; align-items:center; padding:16px 28px; margin-top:12px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-soft);}
.app-footer-version{font-weight:600;}
@media (max-width:600px){
  .app-footer{flex-direction:column; gap:4px; text-align:center; padding:14px 16px;}
}
.panel{background:var(--surface); border-radius:14px; padding:20px 22px; margin-bottom:18px; box-shadow:0 4px 18px rgba(10,61,117,.06);}
.panel h3{margin:0 0 6px;}
.desc{color:var(--ink-soft); font-size:13px; margin:0 0 14px;}
.placeholder-tag{display:inline-block; background:#FFF3E6; color:var(--orange-dark); font-weight:700; font-size:11px; padding:4px 10px; border-radius:999px; margin-bottom:14px;}

/* ======================================================================
   Sistem Reka Bentuk -- Header Panel Berwarna & KPI Tile (gaya
   platform GRC enterprise: header bar warna solid + toolbar ikon
   penjuru kanan, kad KPI besar berwarna dengan pecahan X/Y).
   ====================================================================== */
.panel-flush{padding:0; overflow:hidden;}
.panel-head{padding:13px 20px; display:flex; justify-content:space-between; align-items:center; color:#fff;}
.panel-head h3, .panel-head h4{margin:0; color:#fff; font-size:13.5px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;}
.panel-head-navy{background:linear-gradient(120deg,var(--navy),var(--navy-dark));}
.panel-head-teal{background:linear-gradient(120deg,#0E8C96,#0A5C64);}
.panel-head-orange{background:linear-gradient(120deg,var(--orange),var(--orange-dark));}
.panel-head-green{background:linear-gradient(120deg,#2E9E6B,#1D7A50);}
.panel-head-red{background:linear-gradient(120deg,#C4443A,#8B1E14);}
.panel-body{padding:16px 20px 20px;}
.panel-toolbar{display:flex; gap:6px;}
.panel-toolbar a, .panel-toolbar button{background:rgba(255,255,255,.16); border:none; color:#fff; width:26px; height:26px; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none;}
.panel-toolbar a:hover, .panel-toolbar button:hover{background:rgba(255,255,255,.3);}

.kpi-tile-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:18px;}
.kpi-tile{border-radius:12px; padding:16px 18px; color:#fff; position:relative;}
.kpi-tile .kpi-tile-icon{position:absolute; top:14px; right:14px; opacity:.5;}
.kpi-tile .kpi-tile-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; opacity:.9; margin-bottom:10px;}
.kpi-tile .kpi-tile-value{font-size:26px; font-weight:800; display:flex; align-items:baseline; gap:4px;}
.kpi-tile .kpi-tile-value small{font-size:14px; font-weight:600; opacity:.75;}
.kpi-tile.teal{background:linear-gradient(135deg,#17A6B4,#0E7C86);}
.kpi-tile.orange{background:linear-gradient(135deg,#F7941D,#D9740E);}
.kpi-tile.green{background:linear-gradient(135deg,#34AC78,#1D7A50);}
.kpi-tile.navy{background:linear-gradient(135deg,var(--navy),var(--navy-dark));}
.kpi-tile.red{background:linear-gradient(135deg,#D9534F,#8B1E14);}

.tab-strip{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:-4px 0 20px; overflow-x:auto;}
.tab-strip a{padding:10px 16px; font-size:13px; font-weight:600; color:var(--ink-soft); text-decoration:none; border-bottom:2.5px solid transparent; white-space:nowrap;}
.tab-strip a.active{color:var(--navy); border-bottom-color:var(--orange);}
.tab-strip a:hover{color:var(--navy);}

/* Carta Organisasi (org-chart) -- pokok CSS klasik guna nested UL/LI +
   connector lines, TIADA library JS luaran. Skrol mendatar automatik
   bila pokok lebih lebar daripada skrin -- elak reka bentuk pecah. */
.org-chart-scroll{overflow-x:auto; padding:16px 40px 24px; position:relative;}
.org-chart-wrap{position:relative;}
.org-chart-wrap::before, .org-chart-wrap::after{content:''; position:absolute; top:0; bottom:0; width:32px; pointer-events:none; z-index:2;}
.org-chart-wrap::before{left:0; background:linear-gradient(to right, var(--surface), transparent);}
.org-chart-wrap::after{right:0; background:linear-gradient(to left, var(--surface), transparent);}
.org-tree, .org-tree ul{display:flex; padding-top:24px; position:relative; justify-content:center;}
.org-tree{display:inline-flex; min-width:100%; box-sizing:border-box;}
.org-tree ul{padding-top:24px;}
.org-tree li{display:flex; flex-direction:column; align-items:center; list-style:none; position:relative; padding:24px 14px 0; flex-shrink:0;}
.org-tree li::before, .org-tree li::after{content:''; position:absolute; top:0; right:50%; border-top:2px solid var(--line); width:50%; height:24px;}
.org-tree li::after{right:auto; left:50%; border-left:2px solid var(--line);}
.org-tree li:only-child::before, .org-tree li:only-child::after{display:none;}
.org-tree li:only-child{padding-top:0;}
.org-tree li:first-child::before{border:0 none;}
.org-tree li:last-child::after{border:0 none;}
.org-tree li:last-child::before{border-right:2px solid var(--line); border-radius:0 6px 0 0;}
.org-tree li:first-child::after{border-radius:6px 0 0 0;}
.org-tree > li{padding-top:0;}
.org-tree > li::before, .org-tree > li::after{display:none;}
/* Garisan penyambung MENEGAK antara nod induk dan "bas" mendatar
   anak-anaknya -- ELAK carta nampak "terputus" (gap kosong) antara
   peringkat. Dilukis pada UL anak (bukan LI induk) supaya automatik
   berfungsi tanpa mengira bilangan anak (1 hingga N, sedia untuk
   penambahan subsidiari akan datang). */
.org-tree li > ul{position:relative;}
.org-tree li > ul::before{content:''; position:absolute; top:0; left:50%; width:0; border-left:2px solid var(--line); height:24px;}
.org-node{border-radius:10px; padding:10px 14px; min-width:150px; text-align:center; cursor:pointer; border:2px solid var(--line); background:var(--surface); box-shadow:0 2px 8px rgba(10,61,117,.06); transition:transform .1s; flex-shrink:0;}
.org-node:hover{transform:translateY(-2px); box-shadow:0 4px 14px rgba(10,61,117,.14);}
.org-node.status-selamat{border-color:#2E9E6B;}
.org-node.status-amaran{border-color:#E67A0A;}
.org-node.status-kritikal{border-color:#C4443A;}
.org-node .org-node-name{font-size:12.5px; font-weight:700; color:var(--ink); margin-bottom:4px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.org-node .org-node-badges{display:flex; gap:4px; justify-content:center; flex-wrap:wrap;}
.org-node .org-dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:3px;}
.org-detail-panel{background:var(--bg); border-radius:12px; padding:18px 20px; margin-top:16px;}
.org-detail-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-top:10px;}
.org-detail-grid .stat{background:var(--surface); border-radius:8px; padding:10px 12px; text-align:center;}
.org-detail-grid .stat .n{font-size:20px; font-weight:800;}
.org-detail-grid .stat .l{font-size:10.5px; color:var(--ink-soft); text-transform:uppercase;}

table{width:100%; border-collapse:collapse; font-size:13px;}
th{background:var(--navy); color:#fff; text-align:left; padding:9px 10px; font-size:11.5px; text-transform:uppercase;}
td{padding:9px 10px; border-bottom:1px solid var(--line);}
.badge{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px;}
.badge.high{background:var(--red-bg); color:var(--red);}
.badge.med{background:var(--amber-bg); color:var(--amber);}
.badge.low{background:var(--green-bg); color:var(--green);}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}

/* Navigasi Back + Aksi Borang (Cancel/Submit) -- konsisten merentas sistem */
.back-link{display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); font-size:13px; font-weight:600; text-decoration:none; margin-bottom:14px;}
.back-link:hover{color:var(--navy);}
.form-actions{display:flex; gap:10px; margin-top:14px;}
.field.full{grid-column:1/-1;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:5px;}
input,select,textarea{width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:9px; font-family:inherit; font-size:13.5px;}
.error-box{background:var(--red-bg); color:var(--red); padding:12px 14px; border-radius:9px; margin-bottom:14px; font-size:13px;}
.success-box{background:var(--green-bg); color:var(--green); padding:12px 14px; border-radius:9px; margin-bottom:14px; font-size:13px;}

.login-body{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; background:var(--bg);}
.login-shell{display:flex; max-width:820px; width:100%; margin:20px; border-radius:18px; overflow:hidden; box-shadow:0 12px 40px rgba(10,61,117,.15);}
.login-brand{flex:1; background:linear-gradient(135deg,var(--navy),var(--orange-dark)); color:#fff; padding:40px 34px;}
.login-brand .brand-mark{width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:14px;}
.login-brand h1{margin:0 0 4px; font-size:26px;}
.login-tagline{font-size:13px; opacity:.9; margin-top:18px; line-height:1.5;}
.login-version{font-size:11px; opacity:.7; margin-top:20px;}
.login-form-panel{flex:1; background:#fff; padding:40px 34px;}
.demo-hint{font-size:11.5px; color:var(--ink-soft); margin-top:14px;}
.login-shell.login-centered{max-width:420px; flex-direction:column;}
.login-shell.login-centered .login-brand{text-align:center; padding:30px 34px 20px;}
.login-shell.login-centered .login-tagline,.login-shell.login-centered .login-version{display:none;}
.lang-switch a{color:var(--ink-soft); text-decoration:none; font-weight:600;}
.lang-switch a.active{color:var(--orange-dark);}

/* ================= ARCIS Conversational Co-Pilot ================= */
#arcis-copilot-fab{
  position:fixed; right:26px; bottom:26px; width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--navy),var(--orange-dark)); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 8px 24px rgba(10,61,117,.35); z-index:500; transition:transform .15s ease;
}
#arcis-copilot-fab:hover{transform:scale(1.06);}
#arcis-copilot-fab.arcis-copilot-fab-active{background:linear-gradient(135deg,var(--orange-dark),var(--navy));}
#arcis-copilot-fab .nav-icon,.arcis-copilot-head-icon .nav-icon{color:#fff; opacity:1;}

#arcis-copilot-drawer{
  position:fixed; right:26px; bottom:96px; width:380px; max-width:calc(100vw - 32px);
  height:min(560px, calc(100vh - 140px)); background:var(--surface); border-radius:16px;
  box-shadow:0 20px 60px rgba(10,25,50,.28); display:flex; flex-direction:column;
  overflow:hidden; z-index:499; border:1px solid var(--line);
}
#arcis-copilot-drawer.arcis-copilot-hidden{display:none;}

.arcis-copilot-head{
  background:linear-gradient(120deg,var(--navy),var(--navy-dark) 60%, var(--orange-dark));
  color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; flex:0 0 auto;
}
.arcis-copilot-head-title{display:flex; align-items:center; gap:10px;}
.arcis-copilot-head-icon{width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.arcis-copilot-head-name{font-weight:700; font-size:14px; line-height:1.2;}
.arcis-copilot-head-sub{font-size:11px; opacity:.85;}
#arcis-copilot-close{background:none; border:none; color:#fff; font-size:16px; cursor:pointer; opacity:.85; line-height:1; padding:4px;}
#arcis-copilot-close:hover{opacity:1;}

.arcis-copilot-messages{flex:1 1 auto; overflow-y:auto; padding:14px 14px 6px; display:flex; flex-direction:column; gap:10px; background:var(--bg);}
.arcis-copilot-msg{display:flex;}
.arcis-copilot-msg-user{justify-content:flex-end;}
.arcis-copilot-msg-bot{justify-content:flex-start;}
.arcis-copilot-bubble{max-width:86%; padding:9px 13px; border-radius:14px; font-size:13px; line-height:1.5; word-wrap:break-word;}
.arcis-copilot-msg-bot .arcis-copilot-bubble{background:#fff; border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:4px;}
.arcis-copilot-msg-user .arcis-copilot-bubble{background:var(--navy); color:#fff; border-bottom-right-radius:4px;}
.arcis-copilot-bubble strong{font-weight:700;}

.arcis-copilot-typing{display:flex; gap:4px; align-items:center; padding:11px 13px;}
.arcis-copilot-typing span{width:6px; height:6px; border-radius:50%; background:var(--ink-soft); opacity:.5; animation:arcis-copilot-blink 1.1s infinite ease-in-out;}
.arcis-copilot-typing span:nth-child(2){animation-delay:.15s;}
.arcis-copilot-typing span:nth-child(3){animation-delay:.3s;}
@keyframes arcis-copilot-blink{0%,80%,100%{opacity:.3; transform:translateY(0);} 40%{opacity:1; transform:translateY(-2px);}}

.arcis-copilot-actions{display:flex; flex-direction:column; gap:6px; align-items:flex-start; margin-left:2px;}
.arcis-copilot-action-link{font-size:12px; font-weight:600; color:var(--orange-dark); background:#FFF3E6; padding:6px 12px; border-radius:999px; text-decoration:none;}
.arcis-copilot-action-link:hover{background:var(--orange); color:#fff;}

.arcis-copilot-chips{display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px; flex:0 0 auto; background:var(--bg); border-top:1px solid var(--line);}
.arcis-copilot-chip{background:#fff; border:1px solid var(--line); color:var(--navy); font-size:11.5px; font-weight:600; padding:6px 11px; border-radius:999px; cursor:pointer;}
.arcis-copilot-chip:hover{background:#FFF3E6; border-color:var(--orange); color:var(--orange-dark);}

.arcis-copilot-input-row{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); flex:0 0 auto; background:#fff;}
.arcis-copilot-input-row input{flex:1; border-radius:999px; padding:9px 15px;}
#arcis-copilot-send{width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:none; background:var(--orange); color:#fff; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
#arcis-copilot-send:hover{background:var(--orange-dark);}
#arcis-copilot-send:disabled{opacity:.5; cursor:default;}

@media (max-width:600px){
  #arcis-copilot-drawer{right:16px; left:16px; width:auto; bottom:88px; height:min(70vh, 560px);}
  #arcis-copilot-fab{right:16px; bottom:16px;}
}