/* ============================================================
   GDRS - GovDomain Registry System  |  main.css
   Primary: #6ec1e4  |  Secondary: #000
   ============================================================ */
:root {
  --pr:      #6ec1e4;
  --pr-d:    #4aafd6;
  --pr-l:    #e8f6fc;
  --sec:     #000000;
  --white:   #ffffff;
  --g50:     #f8f9fa;
  --g100:    #f0f2f5;
  --g200:    #e9ecef;
  --g300:    #dee2e6;
  --g400:    #ced4da;
  --g500:    #adb5bd;
  --g600:    #6c757d;
  --g700:    #495057;
  --g800:    #343a40;
  --g900:    #212529;
  --green:   #28a745;
  --red:     #dc3545;
  --yellow:  #ffc107;
  --blue:    #17a2b8;
  --sb-w:    260px;
  --tb-h:    62px;
  --rad:     10px;
  --rad-s:   6px;
  --rad-l:   16px;
  --sh:      0 2px 12px rgba(0,0,0,.09);
  --sh-s:    0 1px 4px rgba(0,0,0,.07);
  --tr:      .2s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--g100);color:var(--g900);min-height:100vh;line-height:1.6}

/* Layout */
.app-wrap{display:flex;min-height:100vh}

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sb-w);background:var(--sec);color:var(--white);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;
  z-index:1000;overflow:hidden;
  transition:transform var(--tr);
}
.sb-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;height:var(--tb-h);
  background:rgba(110,193,228,.1);
  border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;
}
.sb-logo{display:flex;align-items:center;gap:11px}
.sb-icon{
  width:36px;height:36px;background:var(--pr);border-radius:var(--rad-s);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--sec);flex-shrink:0
}
.sb-name{display:block;font-size:1.1rem;font-weight:700;color:var(--pr);letter-spacing:1px}
.sb-sub{display:block;font-size:.66rem;color:var(--g500);margin-top:-1px}
.sb-close{display:none;background:none;border:none;color:var(--g500);font-size:1.1rem;cursor:pointer}

.sb-nav{flex:1;overflow-y:auto;padding:10px 0}
.sb-nav::-webkit-scrollbar{width:4px}
.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
.sb-lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:1.2px;color:var(--g500);
  padding:10px 20px 3px;font-weight:600;display:block}
.sb-item{
  display:flex;align-items:center;gap:11px;padding:10px 20px;
  color:var(--g300);text-decoration:none;font-size:.94rem;
  transition:all var(--tr);border-left:3px solid transparent;margin:1px 0;
}
.sb-item i{width:18px;text-align:center;font-size:1rem;flex-shrink:0}
.sb-item:hover{color:var(--white);background:rgba(110,193,228,.1);border-left-color:var(--pr)}
.sb-item.active{color:var(--white);background:rgba(110,193,228,.18);border-left-color:var(--pr);font-weight:600}
.sb-item.active i{color:var(--pr)}

.sb-foot{padding:13px 18px;border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.2)}
.sb-ver{display:block;font-size:.68rem;color:var(--g600);margin-bottom:9px}
.sb-logout{
  display:flex;align-items:center;gap:8px;
  color:var(--g400);text-decoration:none;font-size:.84rem;
  padding:7px 10px;border-radius:var(--rad-s);transition:all var(--tr);
}
.sb-logout:hover{color:var(--red);background:rgba(220,53,69,.1)}
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:999}

/* ---- Main / Topbar ---- */
.main{flex:1;margin-left:var(--sb-w);display:flex;flex-direction:column;min-height:100vh;transition:margin var(--tr)}
.topbar{
  height:var(--tb-h);background:var(--white);
  border-bottom:1px solid var(--g200);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;position:sticky;top:0;z-index:100;box-shadow:var(--sh-s);
}
.topbar-l{display:flex;align-items:center;gap:12px}
.topbar-r{display:flex;align-items:center}
.tog{
  display:none;background:none;border:none;
  color:var(--g600);font-size:1.1rem;cursor:pointer;
  padding:6px 8px;border-radius:var(--rad-s);transition:all var(--tr);
}
.tog:hover{background:var(--g100);color:var(--pr)}
.pg-title{font-size:1.05rem;font-weight:600;color:var(--g800)}
.umenu{display:flex;align-items:center;gap:9px;position:relative;cursor:pointer}
.uavatar{font-size:2rem;color:var(--pr)}
.uinfo{display:flex;flex-direction:column}
.uname{font-size:.85rem;font-weight:600;color:var(--g800)}
.udrop{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  background:var(--white);border:1px solid var(--g200);
  border-radius:var(--rad);box-shadow:var(--sh);min-width:155px;z-index:200;overflow:hidden;
}
.umenu:hover .udrop{display:block}
.ditem{
  display:flex;align-items:center;gap:8px;padding:10px 15px;
  color:var(--g700);text-decoration:none;font-size:.85rem;transition:background var(--tr);
}
.ditem:hover{background:var(--g50)}
.ditem.text-danger{color:var(--red)}

/* ---- Content ---- */
.content{flex:1;padding:24px}

/* ---- Cards ---- */
.card{background:var(--white);border-radius:var(--rad);box-shadow:var(--sh-s);border:1px solid var(--g200);overflow:hidden;margin-bottom:20px}
.card:last-child{margin-bottom:0}
.card-hd{
  padding:14px 20px;border-bottom:1px solid var(--g200);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.card-title{font-size:.95rem;font-weight:600;color:var(--g800);display:flex;align-items:center;gap:7px}
.card-title i{color:var(--pr)}
.card-body{padding:20px}

/* ---- Stat Cards ---- */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:22px}
.stat-card{
  background:var(--white);border-radius:var(--rad);padding:18px;
  box-shadow:var(--sh-s);border:1px solid var(--g200);
  display:flex;align-items:center;gap:14px;
  transition:transform var(--tr),box-shadow var(--tr);
}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.stat-ic{
  width:50px;height:50px;border-radius:var(--rad);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;
}
.ic-blue{background:var(--pr-l);color:var(--pr-d)}
.ic-green{background:#e8f8ee;color:#1a7c3e}
.ic-orange{background:#fff3e0;color:#c55a00}
.ic-purple{background:#f3e8ff;color:#6d28d9}
.ic-red{background:#fdecea;color:#b71c1c}
.stat-val{font-size:1.85rem;font-weight:700;color:var(--g900);line-height:1}
.stat-lbl{font-size:.78rem;color:var(--g600);margin-top:3px}

/* ---- Charts ---- */
.charts-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;margin-bottom:22px}
.chart-card{background:var(--white);border-radius:var(--rad);box-shadow:var(--sh-s);border:1px solid var(--g200);padding:18px}
.chart-ttl{font-size:.88rem;font-weight:600;color:var(--g800);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.chart-ttl i{color:var(--pr)}
.chart-wrap{position:relative;height:230px}
.chart-wrap canvas{max-height:230px}

/* ---- Tables ---- */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.86rem}
thead th{
  background:var(--g50);padding:10px 13px;text-align:left;
  font-weight:600;font-size:.75rem;text-transform:uppercase;
  letter-spacing:.5px;color:var(--g600);
  border-bottom:2px solid var(--g200);white-space:nowrap;
}
tbody td{padding:11px 13px;border-bottom:1px solid var(--g100);color:var(--g800);vertical-align:middle}
tbody tr:hover{background:var(--g50)}
tbody tr:last-child td{border-bottom:none}
.tbl-acts{display:flex;gap:5px;flex-wrap:nowrap}

/* ---- Badges ---- */
.badge{
  display:inline-flex;align-items:center;
  padding:3px 9px;border-radius:20px;
  font-size:.7rem;font-weight:600;text-transform:capitalize;white-space:nowrap;
}
.badge-active,.badge-success{background:#e8f8ee;color:#1a7c3e}
.badge-error,.badge-danger{background:#fdecea;color:#b71c1c}
.badge-warning,.badge-coming_soon{background:#fff9e6;color:#8a6800}
.badge-info,.badge-system{background:#e3f2fd;color:#0d47a1}
.badge-no_content,.badge-secondary{background:var(--g100);color:var(--g600)}
.badge-redirection{background:#ede9fe;color:#6d28d9}
.badge-suspended{background:#fef2f2;color:#991b1b}
.badge-super_admin{background:#f3e8ff;color:#5b21b6}
.badge-admin{background:#e0f2fe;color:#0369a1}
.badge-viewer{background:#f0fdf4;color:#166534}
.badge-nca{background:var(--pr-l);color:var(--pr-d)}
.badge-external{background:#fff3e0;color:#c04d00}
.badge-website{background:#e3f2fd;color:#1565c0}
.badge-inactive{background:var(--g100);color:var(--g600)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:var(--rad-s);
  font-size:.86rem;font-weight:500;border:none;cursor:pointer;
  text-decoration:none;transition:all var(--tr);white-space:nowrap;
}
.btn-sm{padding:5px 10px;font-size:.76rem}
.btn-lg{padding:11px 22px;font-size:.95rem}
.btn-primary{background:var(--pr);color:var(--sec)}
.btn-primary:hover{background:var(--pr-d);color:var(--sec)}
.btn-secondary{background:var(--g200);color:var(--g700)}
.btn-secondary:hover{background:var(--g300)}
.btn-success{background:var(--green);color:var(--white)}
.btn-success:hover{background:#1e7e34;color:var(--white)}
.btn-danger{background:var(--red);color:var(--white)}
.btn-danger:hover{background:#bd2130;color:var(--white)}
.btn-warning{background:var(--yellow);color:var(--g900)}
.btn-warning:hover{background:#e0a800}
.btn-outline{background:transparent;border:1px solid var(--g300);color:var(--g700)}
.btn-outline:hover{background:var(--g100)}
.btn-print{background:var(--g800);color:var(--white)}
.btn-print:hover{background:var(--sec)}

/* ---- Forms ---- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:15px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group.full{grid-column:1/-1}
label{font-size:.8rem;font-weight:600;color:var(--g700)}
.form-ctrl{
  padding:8px 12px;border:1px solid var(--g300);border-radius:var(--rad-s);
  font-size:.88rem;color:var(--g900);background:var(--white);
  transition:border-color var(--tr),box-shadow var(--tr);width:100%;
}
.form-ctrl:focus{outline:none;border-color:var(--pr);box-shadow:0 0 0 3px rgba(110,193,228,.2)}
select.form-ctrl{cursor:pointer}
textarea.form-ctrl{resize:vertical;min-height:75px}
.form-hint{font-size:.73rem;color:var(--g500)}
.req{color:var(--red);margin-left:2px}
.form-acts{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

/* ---- Alerts ---- */
.alert{
  padding:11px 15px;border-radius:var(--rad-s);font-size:.86rem;
  margin-bottom:14px;display:flex;align-items:center;gap:9px;border-left:4px solid;
}
.alert-success{background:#e8f8ee;border-color:var(--green);color:#1a7c3e}
.alert-danger{background:#fdecea;border-color:var(--red);color:#b71c1c}
.alert-warning{background:#fff9e6;border-color:var(--yellow);color:#8a6800}
.alert-info{background:#e3f2fd;border-color:var(--blue);color:#0d47a1}

/* ---- Breadcrumb / Page Header ---- */
.bc{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--g500);margin-bottom:14px;flex-wrap:wrap}
.bc a{color:var(--pr-d);text-decoration:none}
.bc a:hover{text-decoration:underline}
.bc-sep{color:var(--g400)}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.ph-title{font-size:1.35rem;font-weight:700;color:var(--g900)}
.ph-acts{display:flex;gap:9px;flex-wrap:wrap}

/* ---- Modals ---- */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2000;align-items:center;justify-content:center}
.modal-ov.open{display:flex}
.modal{
  background:var(--white);border-radius:var(--rad-l);box-shadow:0 8px 32px rgba(0,0,0,.18);
  width:90%;max-width:580px;max-height:90vh;display:flex;flex-direction:column;
  animation:mIn .18s ease;
}
@keyframes mIn{from{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:none}}
.modal-hd{padding:17px 22px;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:1rem;font-weight:600;color:var(--g800)}
.modal-x{background:none;border:none;font-size:1.2rem;color:var(--g500);cursor:pointer}
.modal-x:hover{color:var(--red)}
.modal-bd{padding:22px;overflow-y:auto;flex:1}
.modal-ft{padding:15px 22px;border-top:1px solid var(--g200);display:flex;gap:9px;justify-content:flex-end}

/* ---- Filters ---- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.fi{min-width:190px;max-width:300px}
.fs{min-width:140px}

/* ---- Empty State ---- */
.empty{text-align:center;padding:48px 20px;color:var(--g500)}
.empty i{font-size:2.8rem;color:var(--g300);margin-bottom:12px;display:block}
.empty h3{font-size:1.05rem;color:var(--g600);margin-bottom:5px}

/* ---- Misc ---- */
.text-muted{color:var(--g500)}
.text-danger{color:var(--red)!important}
.text-center{text-align:center}
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:20px}
.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:20px}
.d-flex{display:flex}.gap-2{gap:10px}
hr{border:none;border-top:1px solid var(--g200);margin:14px 0}

/* ---- Login ---- */
.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0d0d0d 0%,#1a1f2e 50%,#0f1923 100%);padding:20px;
}
.login-card{background:var(--white);border-radius:var(--rad-l);box-shadow:0 8px 40px rgba(0,0,0,.35);width:100%;max-width:420px;overflow:hidden}
.login-hd{background:var(--sec);padding:28px 30px 22px;text-align:center}
.login-logo{width:58px;height:58px;background:var(--pr);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:var(--sec);margin:0 auto 12px}
.login-title{color:var(--pr);font-size:1.5rem;font-weight:700;letter-spacing:1px}
.login-sub{color:var(--g400);font-size:.78rem;margin-top:4px;line-height:1.4}
.login-body{padding:26px 30px}
.login-body .form-group{margin-bottom:14px}
.login-ft{text-align:center;padding:14px;border-top:1px solid var(--g200);font-size:.75rem;color:var(--g500)}
.pw-wrap{position:relative}
.pw-wrap .form-ctrl{padding-right:38px}
.pw-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--g600)}

/* ---- Responsive ---- */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sb-overlay.open{display:block}
  .tog{display:flex}
  .sb-close{display:flex;align-items:center}
  .main{margin-left:0}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .charts-grid{grid-template-columns:1fr}
  .uinfo{display:none}
}
@media(max-width:560px){
  .content{padding:14px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .ph{flex-direction:column;align-items:flex-start}
  .topbar{padding:0 14px}
}

/* ============================================================
   PRINT
   ============================================================ */
.print-hd { display:none; }
.print-footer { display:none; }

@media print {
  .sidebar,.topbar,.sb-overlay,.tog,.ph-acts,
  .filters,.btn-print,.no-print,.umenu,
  .modal-ov,.bc,.form-acts { display:none !important; }

  .main   { margin-left:0 !important; }
  .content{ padding:0 !important; }
  body    { background:#fff; font-size:11px; color:#000;
            -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* ── Print Header ── */
  .print-hd {
    display:flex !important;
    align-items:flex-start;
    gap:16px;
    padding-bottom:12px;
    margin-bottom:18px;
    border-bottom:1.5px solid #ccc;
  }
  .print-hd .print-logo {
    height:60px;
    width:auto;
    flex-shrink:0;
  }
  .print-hd .print-hd-text {
    flex:1;
    text-align:center;
    padding-top:4px;
  }
  .print-hd .print-dept {
    font-size:10px;
    font-weight:700;
    color:#6ec1e4;
    text-transform:uppercase;
    letter-spacing:1px;
    margin:0 0 4px;
    display:block;
  }
  .print-hd .print-title {
    font-size:15px;
    font-weight:800;
    color:#1e293b;
    margin:0 0 4px;
    display:block;
  }
  .print-hd .print-date {
    font-size:9px;
    color:#888;
    margin:0;
    display:block;
  }

  /* ── Print Footer ── */
  .print-footer {
    display:block !important;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    border-top:1.5px solid #ccc;
    padding-top:6px;
    text-align:center;
    font-size:8.5px;
    color:#888;
  }

  /* ── Cards ── */
  .card { border:1px solid #dee2e6 !important; box-shadow:none !important;
          margin-bottom:14px; break-inside:avoid; }
  .card-hd { border-bottom:1px solid #dee2e6; background:#f8fafc !important; }
  .card-title { font-size:11px !important; }

  /* ── Tables ── */
  table { font-size:10px; border-collapse:collapse; width:100%; }
  thead th {
    background:#1e293b !important;
    color:#fff !important;
    padding:7px 10px;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.4px;
  }
  tbody td { padding:6px 10px; border-bottom:1px solid #f0f2f5; }
  tbody tr:nth-child(even) td { background:#f8fafc; }
  tbody tr:last-child td { border-bottom:none; }

  .badge { border:1px solid #ccc; font-size:8.5px; }
  a { color:#000; text-decoration:none; }
  .text-muted { color:#666 !important; }
  .no-print { display:none !important; }

  @page { size:A4 portrait; margin:1.5cm 1.2cm 2cm; }
}