body{margin:0;font-family:Tahoma,Arial;background:#f3f6f9;color:#102033}
aside{position:fixed;right:0;top:0;bottom:0;width:310px;background:#071b33;color:white;padding:18px;overflow:auto}
main{margin-right:310px;padding:24px}
.brand{font-size:25px;font-weight:bold;text-align:center;border:1px solid #355;padding:16px;border-radius:18px}
.brand span{display:block;font-size:12px;color:#9fd4b7;margin-top:8px}
.u{background:#12395c;margin:14px 0;padding:13px;border-radius:12px;text-align:center}
aside a{display:block;color:white;text-decoration:none;padding:11px;border-radius:10px;margin:5px 0}
aside a:hover,.logout{background:#18a058}
header,.panel,.hero,.kpis div,.alert{background:white;border-radius:18px;box-shadow:0 10px 28px #0001;padding:20px;margin-bottom:20px}
.top-user{margin-top:8px;background:#eef7f1;padding:10px;border-radius:10px}
.hero{text-align:center;border-top:5px solid #18a058}
.alert{border-right:7px solid #f39c12;background:#fffaf0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.kpis strong{display:block;font-size:28px;margin-top:10px;color:#071b33}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
input,select,button{padding:12px;border:1px solid #ddd;border-radius:10px;font-size:15px}
button{background:#0f2d4a;color:white;cursor:pointer;border:0}
button.danger,.danger{background:#c62828}
table{width:100%;border-collapse:collapse}
th{background:#0f2d4a;color:white;padding:12px;text-align:right}
td{padding:10px;border-bottom:1px solid #eee}
.inline{display:flex;gap:6px;align-items:center}
.login{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#071b33,#18a058)}
.card{width:470px;background:white;border-radius:25px;padding:35px;box-shadow:0 20px 50px #0005}
.card h1{text-align:center}
.card input,.card button{width:100%;margin:7px 0}
.err{display:block;background:#ffe2e2;color:#b00020;padding:10px;border-radius:10px}
.hint{background:#f5f7fa;padding:12px;margin-top:12px;border-radius:12px;line-height:1.8}
.denied{border-right:6px solid #c62828}
@media(max-width:900px){aside{position:static;width:auto}main{margin:0}.inline{display:block}}


.ceo-shell{display:grid;grid-template-columns:minmax(320px,460px) 1fr;gap:25px;align-items:start}
.ceo-phone{background:#0b2a53;border-radius:38px;padding:18px;box-shadow:0 20px 45px #0003;color:white;max-width:430px;margin:auto}
.phone-top{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:15px}
.date-row{display:flex;gap:8px;margin:10px 0}
.date-row button{flex:1;background:white;color:#0b2a53}
.mobile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-card{background:white;color:#0b2a53;border-radius:14px;padding:12px;text-align:center;box-shadow:0 4px 10px #0001}
.m-card span{display:block;font-weight:bold;font-size:13px}
.m-card b{display:block;font-size:21px;margin-top:5px}
.m-card small{font-size:11px}
.green{border-top:5px solid #149447}.red{border-top:5px solid #d32f2f}.orange{border-top:5px solid #f57c00}.blue{border-top:5px solid #1565c0}.purple{border-top:5px solid #673ab7}.teal{border-top:5px solid #00897b}.cyan{border-top:5px solid #00acc1}.navy{border-top:5px solid #0d47a1}.violet{border-top:5px solid #7b1fa2}
.mini-chart{background:white;color:#0b2a53;border-radius:14px;margin-top:12px;padding:12px}
.chart-lines{height:130px;display:flex;align-items:end;gap:10px;border-bottom:1px solid #ddd}
.chart-lines span{width:28px;background:linear-gradient(#1565c0,#4caf50);border-radius:8px 8px 0 0}
.ceo-side{display:grid;gap:20px}
.side-box{background:white;border-radius:18px;padding:20px;box-shadow:0 10px 28px #0001}
.approval{border:1px solid #e4e8ef;border-radius:14px;padding:12px;margin:10px 0}
.approval form{display:flex;gap:8px}
.side-box a{display:block;background:#f7fafc;padding:12px;margin:8px 0;border-radius:10px;text-decoration:none;color:#0b2a53;font-weight:bold}
.alerts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.alerts-grid div{background:#fff7e6;border-right:5px solid #f57c00;padding:12px;border-radius:10px}
@media(max-width:950px){.ceo-shell{grid-template-columns:1fr}.ceo-phone{max-width:100%}}


.view_only_notice{
    background:#fff8e1;
    border-right:6px solid #f9a825;
    padding:14px;
    border-radius:12px;
    margin-bottom:15px;
    font-weight:bold;
    color:#5d4200;
}


#billboardsMap{
    height:620px;
    border-radius:18px;
    border:2px solid #dce6f1;
    box-shadow:0 10px 28px #0001;
    overflow:hidden;
}
@media(max-width:900px){
    #billboardsMap{height:480px;}
}


.status_bad{
    display:inline-block;
    background:#ffe1e1;
    color:#b00020;
    padding:6px 10px;
    border-radius:8px;
    font-weight:bold;
}
.status_good{
    display:inline-block;
    background:#e7f8ee;
    color:#0b7a34;
    padding:6px 10px;
    border-radius:8px;
    font-weight:bold;
}
.readonly_badge{
    display:inline-block;
    background:#eef2f7;
    color:#334155;
    padding:6px 10px;
    border-radius:8px;
    font-weight:bold;
}
.view_only_notice{
    background:#fff8e1;
    border-right:6px solid #f9a825;
    padding:14px;
    border-radius:12px;
    margin-bottom:15px;
    font-weight:bold;
    color:#5d4200;
}
.inline{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
}
.inline input{
    min-width:120px;
}


.code_message{
    margin-top:10px;
    padding:10px;
    border-radius:10px;
    background:#f1f5f9;
    font-weight:bold;
}
.code_message.good{
    background:#e7f8ee;
    color:#0b7a34;
}
.code_message.bad{
    background:#ffe1e1;
    color:#b00020;
}
input[readonly]{
    background:#f8fafc;
    color:#334155;
}


.images_grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.preview_img{max-width:100%;border-radius:14px;border:1px solid #d8e0ea;box-shadow:0 8px 24px #0001}


.map_hint{
    margin-top:10px;
    padding:12px;
    border-radius:12px;
    background:#f1f5f9;
    color:#0f172a;
    font-weight:bold;
}
.leaflet-popup-content{
    font-family:Tahoma,Arial,sans-serif;
}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0}.wide{grid-column:1/-1}.inline-form{display:flex;gap:10px;align-items:center;margin:10px 0}.btn{display:inline-block;padding:7px 12px;border-radius:10px;background:#0f766e;color:#fff;text-decoration:none}.small{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:900px){.grid2{grid-template-columns:1fr}.form-grid,.small{grid-template-columns:1fr!important}}

/* Warehouse alert enhancements */
.kpi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px;
    margin-top:10px;
}
.kpi-card{
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:16px;
    box-shadow:0 8px 20px rgba(15,23,42,.06);
    text-align:center;
}
.kpi-card b{
    display:block;
    font-size:28px;
    color:#082444;
    margin-bottom:6px;
}
.kpi-card span{
    color:#475569;
    font-weight:700;
}
.status_warn{
    display:inline-block;
    background:#fff7ed;
    color:#9a3412;
    border:1px solid #fed7aa;
    padding:6px 10px;
    border-radius:10px;
    font-weight:700;
}


/* ===== System Integration 100% - Professional Layout ===== */
.integration-page{
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 30px;
}
.integration-page .card,
.integration-table-card,
.integration-counts,
.integration-toolbar,
.integration-hero,
.integration-summary{
  width: auto;
  box-sizing: border-box;
}
.integration-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid #e5edf7;
  border-radius:22px;
  box-shadow:0 14px 35px #0f2d4a14;
  padding:24px 28px;
  margin-bottom:14px;
}
.hero-title{
  display:flex;
  align-items:center;
  gap:16px;
}
.hero-title h1{
  margin:0 0 6px;
  font-size:30px;
  color:#071b33;
}
.hero-title p{
  margin:0;
  color:#607087;
  font-size:15px;
}
.hero-badge{
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  color:white;
  box-shadow:0 12px 24px #22a7603d;
}
.hero-badge.success{background:#20b86b}
.hero-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn-light{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:115px;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid #dce6f3;
  background:#fff;
  color:#0f2d4a;
  text-decoration:none;
  font-weight:bold;
  cursor:pointer;
}
.last-check{
  color:#344862;
  margin:12px 4px 18px;
}
.integration-stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:16px;
  margin-bottom:22px;
}
.stat-card{
  background:#fff;
  border:1px solid #e4edf8;
  border-radius:18px;
  padding:18px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 10px 25px #0f2d4a0f;
  min-height:92px;
}
.stat-card .stat-icon{
  width:54px;
  height:54px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
}
.stat-card strong{
  display:block;
  font-size:26px;
  margin-bottom:3px;
}
.stat-card span{
  display:block;
  font-weight:bold;
}
.stat-card small{
  color:#65768b;
}
.stat-card.blue{border-color:#bfdbfe;background:linear-gradient(135deg,#fff,#eff6ff)}
.stat-card.blue .stat-icon{background:#dbeafe}
.stat-card.blue strong,.stat-card.blue span{color:#1d5fbf}
.stat-card.green{border-color:#bbf7d0;background:linear-gradient(135deg,#fff,#f0fdf4)}
.stat-card.green .stat-icon{background:#dcfce7}
.stat-card.green strong,.stat-card.green span{color:#15803d}
.stat-card.red{border-color:#fecaca;background:linear-gradient(135deg,#fff,#fef2f2)}
.stat-card.red .stat-icon{background:#fee2e2}
.stat-card.red strong,.stat-card.red span{color:#b91c1c}
.stat-card.orange{border-color:#fed7aa;background:linear-gradient(135deg,#fff,#fff7ed)}
.stat-card.orange .stat-icon{background:#ffedd5}
.stat-card.orange strong,.stat-card.orange span{color:#c46600}
.stat-card.purple{border-color:#ddd6fe;background:linear-gradient(135deg,#fff,#f5f3ff)}
.stat-card.purple .stat-icon{background:#ede9fe}
.stat-card.purple strong,.stat-card.purple span{color:#6d28d9}
.integration-toolbar{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  background:#fff;
  border:1px solid #e4edf8;
  border-radius:18px;
  padding:14px;
  box-shadow:0 10px 25px #0f2d4a0f;
  margin-bottom:16px;
}
.integration-toolbar .tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.integration-toolbar .tab{
  background:#f8fafc;
  color:#0f2d4a;
  border:1px solid #dce6f3;
  padding:11px 16px;
  border-radius:11px;
}
.integration-toolbar .tab.active{
  background:#0f2d4a;
  color:#fff;
}
.integration-toolbar input{
  min-width:260px;
  background:#f8fafc;
}
.integration-table-card{
  background:#fff;
  border:1px solid #e4edf8;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 30px #0f2d4a12;
}
.integration-table th{
  background:#0f2d4a;
  padding:14px;
  font-size:15px;
}
.integration-table td{
  padding:13px 14px;
  vertical-align:middle;
}
.integration-table tbody tr:hover{
  background:#f8fbff;
}
.unit-cell{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:230px;
}
.unit-cell b{display:block;color:#0f2d4a}
.unit-cell small{display:block;color:#789}
.unit-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#f1f5f9;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  padding:7px 12px;
  border-radius:999px;
  font-weight:bold;
  font-size:13px;
}
.status-pill.ok{
  background:#dcfce7;
  color:#15803d;
}
.status-pill.bad{
  background:#fee2e2;
  color:#b91c1c;
}
.fix-cell{
  color:#344862;
  max-width:310px;
}
.integration-summary{
  margin-top:18px;
}
.summary-box{
  display:flex;
  align-items:center;
  gap:18px;
  border-radius:18px;
  padding:18px 22px;
  border:1px solid #bbf7d0;
  background:linear-gradient(135deg,#f0fdf4,#ffffff);
  box-shadow:0 10px 25px #0f2d4a0f;
}
.summary-icon{
  font-size:42px;
}
.summary-box h3{margin:0 0 6px;color:#15803d}
.summary-box p{margin:0;color:#53657a}
.integration-counts{
  margin-top:18px;
  background:#fff;
  border:1px solid #e4edf8;
  border-radius:18px;
  padding:20px;
  box-shadow:0 10px 25px #0f2d4a0f;
}
.integration-counts h2{
  margin:0 0 15px;
  color:#071b33;
}
.counts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}
.count-chip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  background:#f8fafc;
  border:1px solid #e4edf8;
  border-radius:12px;
  padding:12px;
}
.count-chip span{
  color:#344862;
  font-size:13px;
  direction:ltr;
  text-align:left;
}
.count-chip b{
  color:#0f2d4a;
  font-size:18px;
}
@media(max-width:1100px){
  .integration-stats{grid-template-columns:repeat(2,1fr)}
  .integration-hero,.integration-toolbar{flex-direction:column;align-items:stretch}
  .integration-toolbar input{min-width:0;width:100%}
}
@media(max-width:650px){
  .integration-stats{grid-template-columns:1fr}
  .hero-title h1{font-size:24px}
  .integration-table-card{overflow-x:auto}
  .integration-table{min-width:850px}
}
@media print{
  aside,.hero-actions,.integration-toolbar{display:none!important}
  main{margin:0!important;padding:0!important}
  .integration-page{max-width:none}
  .integration-hero,.integration-table-card,.integration-counts,.summary-box{box-shadow:none}
}

/* Single item purchase request form */
.single-request-form .form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    margin-bottom:12px;
}
.single-request-form label{display:flex; flex-direction:column; gap:6px; font-weight:700;}
.single-request-form input,.single-request-form select,.single-request-form textarea{
    width:100%; padding:10px 12px; border:1px solid #d8dee9; border-radius:10px; background:#fff;
}
.single-request-form input[readonly]{background:#f5f7fb; color:#475569;}

/* V30.2 compact accounting sidebar */
.accounting-side-title{margin:14px 0 8px;padding:10px 12px;border-radius:12px;background:#12395c;color:#dbeafe;font-weight:900;text-align:center}
.side-group{margin:7px 0;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.04);overflow:hidden}
.side-group summary{cursor:pointer;padding:11px;border-radius:10px;font-weight:900;color:#fff;list-style:none}
.side-group summary::-webkit-details-marker{display:none}
.side-group a{margin:3px 8px 7px 8px;padding:9px 10px;background:rgba(255,255,255,.06);font-size:14px}
.side-group a:hover{background:#18a058}