/* IMG.CO.ID Unified CWLC Theme Overlay v1.0
   Non-destructive: styles the existing CWLC DOM only when body has .img-cwlc-theme
*/
:root{
  --img-navy:#020b18;
  --img-navy-2:#061522;
  --img-header:#2b3a4a;
  --img-cyan:#31d8ff;
  --img-teal:#2ee6c4;
  --img-green:#18c98f;
  --img-amber:#e5a830;
  --img-red:#e45b68;
  --img-paper:#f4f8fb;
  --img-white:#ffffff;
  --img-ink:#0e2b3f;
  --img-muted:#6d889b;
  --img-line:#dce8ef;
  --img-shadow:0 14px 34px rgba(10,46,67,.09);
  --img-radius:16px;
}

html{background:var(--img-paper)}
body.img-cwlc-theme{
  margin:0!important;
  background:var(--img-paper)!important;
  color:var(--img-ink)!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  overflow-x:hidden;
}

/* ===== Unified IMG Shell ===== */
.img-cwlc-utility{
  height:34px;
  background:#020a12;
  color:#b9ccd8;
  border-bottom:1px solid rgba(49,216,255,.12);
  position:relative;
  z-index:9998;
}
.img-cwlc-wrap{
  width:min(calc(100% - 48px),1480px);
  margin:auto;
}
.img-cwlc-utility .img-cwlc-wrap{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  font-size:11px;
}
.img-cwlc-utility-left{
  display:flex;
  align-items:center;
  gap:12px;
  letter-spacing:.14em;
}
.img-cwlc-utility-left i{
  display:block;width:28px;height:2px;
  background:linear-gradient(90deg,var(--img-teal),var(--img-cyan));
}
.img-cwlc-utility-right{
  display:flex;align-items:center;gap:15px;font-weight:700;
}
.img-cwlc-utility a{color:inherit;text-decoration:none}
.img-cwlc-utility .wa{color:var(--img-teal)}
.img-cwlc-lang{
  display:flex;padding:2px;border:1px solid rgba(49,216,255,.25);
  border-radius:9px;
}
.img-cwlc-lang button{
  border:0;background:transparent;color:#7897aa;
  min-width:34px;height:24px;border-radius:6px;font-weight:800;cursor:pointer;
}
.img-cwlc-lang button.active{background:#0b4054;color:#fff}

.img-cwlc-header{
  height:76px;
  background:var(--img-header);
  color:#fff;
  border-bottom:1px solid rgba(49,216,255,.10);
  position:relative;
  z-index:9997;
}
.img-cwlc-header .img-cwlc-wrap{
  height:100%;display:flex;align-items:center;gap:25px;
}
.img-cwlc-brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;
}
.img-cwlc-brand img{width:44px;height:44px;object-fit:contain}
.img-cwlc-brand span{display:flex;flex-direction:column}
.img-cwlc-brand strong{font-size:20px;line-height:1.05}
.img-cwlc-brand small{font-size:10px;color:#8eb0c7;margin-top:4px;letter-spacing:.04em}
.img-cwlc-context{
  margin-left:auto;display:flex;align-items:center;gap:11px;
}
.img-cwlc-context a{
  color:#c4d4de;text-decoration:none;font-size:12px;
  border:1px solid #496578;border-radius:10px;padding:9px 12px;
}
.img-cwlc-context a.primary{
  color:#00151c;border:0;font-weight:800;
  background:linear-gradient(90deg,#35d5f6,#31e4c2);
}

.img-cwlc-hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(110deg,#020b18,#041927 58%,#073342);
  min-height:215px;
}
.img-cwlc-hero:before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(42,121,148,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(42,121,148,.08) 1px,transparent 1px);
  background-size:50px 50px;pointer-events:none;
}
.img-cwlc-hero-inner{
  position:relative;z-index:1;min-height:215px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;
}
.img-cwlc-hero-copy{padding:34px 0}
.img-cwlc-kicker{
  font-size:11px;letter-spacing:.15em;color:#8ad5e8;font-weight:850;
}
.img-cwlc-hero h1{
  margin:10px 0 8px;font-size:clamp(34px,4.5vw,52px);
  line-height:1;letter-spacing:-.045em;
}
.img-cwlc-hero h1 em{
  font-style:normal;color:var(--img-cyan);
}
.img-cwlc-hero p{
  margin:0;color:#9db7c8;max-width:820px;font-size:15px;line-height:1.55;
}
.img-cwlc-hero-pills{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;
}
.img-cwlc-hero-pills span{
  border:1px solid #1c5369;border-radius:999px;
  padding:7px 11px;color:#96bed0;font-size:10px;
}
.img-cwlc-orbit{
  width:190px;height:190px;border:1px solid rgba(49,216,255,.28);
  border-radius:50%;position:relative;flex:0 0 auto;margin-right:24px;
}
.img-cwlc-orbit:before,.img-cwlc-orbit:after{
  content:"";position:absolute;border:1px solid rgba(49,216,255,.25);
  border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);
}
.img-cwlc-orbit:before{width:130px;height:130px}
.img-cwlc-orbit:after{width:72px;height:72px}
.img-cwlc-orbit b{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:var(--img-cyan);font-size:24px;z-index:2;
}

/* ===== Existing CWLC content theme ===== */
body.img-cwlc-theme > .container,
body.img-cwlc-theme > main,
body.img-cwlc-theme .container,
body.img-cwlc-theme .main-content,
body.img-cwlc-theme .dashboard,
body.img-cwlc-theme .dashboard-container,
body.img-cwlc-theme .content-wrapper{
  background:var(--img-paper);
}

/* Common cards/panels */
body.img-cwlc-theme .card,
body.img-cwlc-theme .panel,
body.img-cwlc-theme .widget,
body.img-cwlc-theme .box,
body.img-cwlc-theme .stat-card,
body.img-cwlc-theme .metric-card,
body.img-cwlc-theme .control-card,
body.img-cwlc-theme .chart-card,
body.img-cwlc-theme .device-card,
body.img-cwlc-theme .settings-card,
body.img-cwlc-theme .history-card,
body.img-cwlc-theme .calibration-card,
body.img-cwlc-theme .info-card{
  background:#fff!important;
  color:var(--img-ink)!important;
  border:1px solid var(--img-line)!important;
  border-radius:var(--img-radius)!important;
  box-shadow:var(--img-shadow)!important;
}

/* Headings */
body.img-cwlc-theme h1,
body.img-cwlc-theme h2,
body.img-cwlc-theme h3,
body.img-cwlc-theme h4{
  color:var(--img-ink);
}
body.img-cwlc-theme .img-cwlc-header h1,
body.img-cwlc-theme .img-cwlc-header h2,
body.img-cwlc-theme .img-cwlc-hero h1,
body.img-cwlc-theme .img-cwlc-hero h2,
body.img-cwlc-theme .img-cwlc-hero h3{
  color:#fff;
}

/* Buttons */
body.img-cwlc-theme button,
body.img-cwlc-theme .btn,
body.img-cwlc-theme input[type="button"],
body.img-cwlc-theme input[type="submit"]{
  border-radius:10px;
  transition:.18s ease;
}
body.img-cwlc-theme .btn-primary,
body.img-cwlc-theme button.primary,
body.img-cwlc-theme .button-primary{
  background:linear-gradient(90deg,#22cde8,#2edab9)!important;
  color:#00151c!important;
  border:0!important;
  font-weight:800!important;
}
body.img-cwlc-theme .btn-secondary,
body.img-cwlc-theme button.secondary{
  background:#0a2b40!important;
  color:#fff!important;
  border:1px solid #2a6780!important;
}

/* Form controls */
body.img-cwlc-theme input,
body.img-cwlc-theme select,
body.img-cwlc-theme textarea{
  border:1px solid #cbdce6;
  border-radius:10px;
  background:#fff;
  color:var(--img-ink);
}
body.img-cwlc-theme input:focus,
body.img-cwlc-theme select:focus,
body.img-cwlc-theme textarea:focus{
  outline:2px solid rgba(49,216,255,.22);
  border-color:#4ccfe9;
}

/* Tables */
body.img-cwlc-theme table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border:1px solid var(--img-line);
  border-radius:14px;
  overflow:hidden;
}
body.img-cwlc-theme th{
  background:#edf5f8;
  color:#48677a;
  font-size:12px;
}
body.img-cwlc-theme th,
body.img-cwlc-theme td{
  border-bottom:1px solid #e5eef3;
}
body.img-cwlc-theme tr:last-child td{border-bottom:0}

/* Status semantics */
body.img-cwlc-theme .status-online,
body.img-cwlc-theme .online,
body.img-cwlc-theme .status-ok,
body.img-cwlc-theme .badge-success{
  background:#ddf8ee!important;color:#118560!important;
}
body.img-cwlc-theme .status-offline,
body.img-cwlc-theme .offline,
body.img-cwlc-theme .status-error,
body.img-cwlc-theme .badge-danger{
  background:#fde7ea!important;color:#bd4250!important;
}
body.img-cwlc-theme .status-warning,
body.img-cwlc-theme .badge-warning{
  background:#fff2d7!important;color:#9c6b13!important;
}

/* Tabs/navigation inside CWLC */
body.img-cwlc-theme .tabs,
body.img-cwlc-theme .nav-tabs{
  border-bottom:1px solid #dce8ef!important;
}
body.img-cwlc-theme .tab,
body.img-cwlc-theme .nav-tabs a{
  border-radius:10px 10px 0 0;
}
body.img-cwlc-theme .tab.active,
body.img-cwlc-theme .nav-tabs .active{
  color:#087e93!important;
  border-bottom-color:var(--img-cyan)!important;
}

/* Canvas/charts */
body.img-cwlc-theme canvas{
  max-width:100%;
}

/* Modal */
body.img-cwlc-theme .modal-content,
body.img-cwlc-theme .dialog,
body.img-cwlc-theme .popup{
  border-radius:18px!important;
  border:1px solid var(--img-line)!important;
  box-shadow:0 26px 70px rgba(2,24,39,.25)!important;
}

/* Unified page footer injected by JS */
.img-cwlc-footer{
  background:#020b13;color:#708fa2;
  border-top:1px solid rgba(49,216,255,.14);
  padding:18px 0;font-size:11px;margin-top:30px;
}
.img-cwlc-footer .img-cwlc-wrap{
  display:flex;justify-content:space-between;gap:20px;align-items:center;
}

/* Responsive */
@media(max-width:900px){
  .img-cwlc-orbit{display:none}
  .img-cwlc-hero-inner{display:block}
  .img-cwlc-context a:not(.primary){display:none}
}
@media(max-width:760px){
  .img-cwlc-wrap{width:min(calc(100% - 26px),1480px)}
  .img-cwlc-utility-left{display:none}
  .img-cwlc-utility .img-cwlc-wrap{justify-content:flex-end}
  .img-cwlc-utility-right>a:nth-child(1),
  .img-cwlc-utility-right>a:nth-child(3){display:none}
  .img-cwlc-header{height:68px}
  .img-cwlc-brand img{width:39px;height:39px}
  .img-cwlc-brand strong{font-size:18px}
  .img-cwlc-context a.primary{padding:8px 10px}
  .img-cwlc-hero,.img-cwlc-hero-inner{min-height:185px}
  .img-cwlc-hero-copy{padding:28px 0}
  .img-cwlc-hero h1{font-size:35px}
  .img-cwlc-footer .img-cwlc-wrap{display:block;text-align:center}
}