/* =========================================================
   NTUC UNIVERSAL DESIGN SYSTEM
========================================================= */

:root {

  /* ======================================================
     COLORS
  ====================================================== */

  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;

  --navy-950: #08111f;
  --navy-900: #0b1b2b;
  --navy-800: #102a43;

  --mint-500: #10b981;
  --mint-600: #059669;

  --text: #0f172a;
  --text-soft: #475569;
  --text-muted: #64748b;

  --border: #e2e8f0;
  --border-soft: #edf2f7;

  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #10b981;

  /* ======================================================
     RADIUS
  ====================================================== */

  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* ======================================================
     SHADOWS
  ====================================================== */

  --shadow-xs: 0 2px 10px rgba(15, 23, 42, 0.03);

  --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.05);

  --shadow:
    0 10px 30px rgba(15, 23, 42, 0.06);

  --shadow-lg:
    0 18px 45px rgba(15, 23, 42, 0.10);

  /* ======================================================
     EFFECTS
  ====================================================== */

  --transition: 0.25s ease;

  --mint-ring:
    0 0 0 4px rgba(16, 185, 129, 0.12);

  --glass:
    rgba(255,255,255,0.72);

}

/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  padding:0;

  background:
    radial-gradient(circle at top right,
      rgba(16,185,129,0.04),
      transparent 22%),
    var(--bg);

  color:var(--text);

  font-family:
    "Noto",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height:1.65;

  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   SELECTION
========================================================= */

::selection{
  background:var(--navy-900);
  color:#fff;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{
  margin:0;

  color:var(--navy-900);

  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.1;
}

h1{
  font-size:clamp(2rem, 5vw, 3.6rem);
}

h2{
  font-size:clamp(1.6rem, 4vw, 2.5rem);
}

h3{
  font-size:1.3rem;
}

p{
  margin:0;
  color:var(--text-muted);
}

small{
  color:var(--text-muted);
}

/* =========================================================
   LINKS
========================================================= */

a{
  color:inherit;
  text-decoration:none;
  transition:all var(--transition);
}

a:hover{
  color:var(--mint-600);
}

/* =========================================================
   LAYOUT
========================================================= */

.container{
  width:100%;
  max-width:1280px;
  margin-inline:auto;
  padding-inline:24px;
}

.section{
  padding-block:32px;
}

/* =========================================================
   SURFACES
========================================================= */

.card,
.panel,
.surface,
section.surface{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:var(--radius-lg);

  box-shadow:var(--shadow);

  position:relative;

}

.card,
.panel{
  padding:24px;
}

/* =========================================================
   GLASS SURFACE
========================================================= */

.glass{

  background:var(--glass);

  backdrop-filter:blur(16px);

  border:1px solid rgba(255,255,255,0.35);

  box-shadow:var(--shadow);

}

/* =========================================================
   HOVER SYSTEM
========================================================= */

.hover-lift{
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
}

.hover-lift:hover{

  transform:translateY(-4px);

  box-shadow:var(--shadow-lg);

  border-color:#cbd5e1;

}

/* =========================================================
   BUTTONS
========================================================= */

.btn{

  appearance:none;
  border:none;
  outline:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  min-height:48px;

  padding:12px 18px;

  border-radius:16px;

  font-size:14px;
  font-weight:800;

  cursor:pointer;

  transition:all var(--transition);

  user-select:none;

  white-space:nowrap;
}

.btn:active{
  transform:scale(.98);
}

/* PRIMARY */

.btn-primary{

  background:
    linear-gradient(
      135deg,
      var(--mint-500),
      var(--mint-600)
    );

  color:#fff;

  box-shadow:
    0 10px 24px rgba(16,185,129,0.22);

}

.btn-primary:hover{

  transform:translateY(-1px);

  filter:brightness(1.02);

}

/* DARK */

.btn-dark{

  background:var(--navy-900);

  color:#fff;

}

.btn-dark:hover{
  background:#10233b;
}

/* SECONDARY */

.btn-secondary{

  background:#fff;

  color:var(--navy-900);

  border:1px solid var(--border);

}

.btn-secondary:hover{

  background:var(--surface-soft);

  border-color:#cbd5e1;

}

/* SOFT */

.btn-soft{

  background:
    rgba(16,185,129,0.08);

  color:var(--mint-600);

}

.btn-soft:hover{

  background:
    rgba(16,185,129,0.14);

}

/* =========================================================
   INPUTS
========================================================= */

input,
select,
textarea{

  width:100%;

  padding:14px 16px;

  background:#fff;

  border:1px solid var(--border);

  border-radius:16px;

  outline:none;

  color:var(--text);

  transition:all var(--transition);

}

textarea{
  resize:vertical;
  min-height:120px;
}

input::placeholder,
textarea::placeholder{
  color:#94a3b8;
}

input:focus,
select:focus,
textarea:focus{

  border-color:var(--mint-500);

  box-shadow:var(--mint-ring);

}

/* =========================================================
   LABELS
========================================================= */

label{

  display:block;

  margin-bottom:8px;

  color:var(--navy-800);

  font-size:13px;
  font-weight:800;
  letter-spacing:0.01em;

}

/* =========================================================
   BADGES
========================================================= */

.badge{

  display:inline-flex;
  align-items:center;
  gap:6px;

  min-height:28px;

  padding:4px 12px;

  border-radius:999px;

  font-size:12px;
  font-weight:800;

}

.badge-success{

  background:
    rgba(16,185,129,0.10);

  color:var(--mint-600);

}

.badge-dark{

  background:
    rgba(15,23,42,0.08);

  color:var(--navy-900);

}

/* =========================================================
   TABLES
========================================================= */

.table-wrap{

  overflow:auto;

  border-radius:var(--radius-lg);

  border:1px solid var(--border);

  background:#fff;

}

table{
  width:100%;
  border-collapse:collapse;
}

thead{
  background:#f8fafc;
}

th{

  padding:16px 18px;

  text-align:left;

  font-size:12px;
  font-weight:900;

  color:var(--text-muted);

  text-transform:uppercase;
  letter-spacing:.05em;

}

td{

  padding:18px;

  border-top:1px solid var(--border-soft);

  vertical-align:middle;

}

tbody tr{
  transition:background var(--transition);
}

tbody tr:hover{
  background:#fafcff;
}

/* =========================================================
   NAVBAR
========================================================= */

header,
nav{

  background:
    rgba(255,255,255,0.82);

  backdrop-filter:blur(16px);

  border-bottom:1px solid rgba(226,232,240,0.75);

}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar{

  background:
    linear-gradient(
      180deg,
      #08111f 0%,
      #0b1b2b 100%
    );

  color:#fff;

}

.sidebar a{

  display:flex;
  align-items:center;
  gap:14px;

  padding:14px 16px;

  border-radius:18px;

  color:#cbd5e1;

  font-weight:700;

}

.sidebar a:hover{

  background:rgba(255,255,255,0.06);

  color:#fff;

}

.sidebar a.active{

  background:rgba(255,255,255,0.10);

  color:#fff;

}

/* =========================================================
   IMAGES
========================================================= */

.img-wrap{

  position:relative;

  overflow:hidden;

  border-radius:var(--radius-lg);

  background:#e2e8f0;

  aspect-ratio:16 / 9;

}

.img-wrap img{

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transition:
    transform .5s ease,
    opacity .3s ease;

}

.img-wrap:hover img{
  transform:scale(1.04);
}

.img-fallback{

  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#94a3b8;

  background:
    linear-gradient(
      135deg,
      #f1f5f9,
      #e2e8f0
    );

}

/* =========================================================
   LOADER
========================================================= */

.loading-overlay{

  position:fixed;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    rgba(255,255,255,0.72);

  backdrop-filter:blur(10px);

  z-index:9999;

  opacity:0;
  visibility:hidden;

  transition:all .3s ease;

}

.loading-overlay.active{

  opacity:1;
  visibility:visible;

}

.spinner{

  width:52px;
  height:52px;

  border-radius:50%;

  border:4px solid #dbeafe;
  border-top-color:var(--mint-500);

  animation:spin .8s linear infinite;

}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

/* =========================================================
   SKELETONS
========================================================= */

.skeleton{

  border-radius:16px;

  background:
    linear-gradient(
      90deg,
      #e2e8f0 20%,
      #f8fafc 50%,
      #e2e8f0 80%
    );

  background-size:300% 100%;

  animation:shimmer 1.3s infinite linear;

}

@keyframes shimmer{

  from{
    background-position:100% 0;
  }

  to{
    background-position:-100% 0;
  }

}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar{
  width:8px;
  height:8px;
}

::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
  background:#94a3b8;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px){

  .container{
    padding-inline:16px;
  }

  .card,
  .panel{
    padding:18px;
  }

  .btn{
    width:100%;
  }

}