/* ================================================================
   CLAY MORPHISM BLUE — POS Theme for AdminLTE 2
   Design: soft 3D clay surfaces, dual shadows, no hard borders
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ================================================================
   CSS VARIABLES
   ================================================================ */
:root {
  /* Blue palette */
  --b950: #091E4A;
  --b900: #0D47A1;
  --b800: #1565C0;
  --b700: #1976D2;
  --b600: #1E88E5;
  --b400: #42A5F5;
  --b200: #90CAF9;
  --b100: #BBDEFB;
  --b50:  #E3F2FD;

  /* Semantic */
  --green:  #2E7D32;
  --orange: #E65100;
  --red:    #C62828;
  --amber:  #F57F17;

  /* Clay background — warm blue-grey */
  --clay-bg:      #D6E0F0;
  --clay-surface: #E4EBF5;
  --clay-white:   #FFFFFF;

  /* Text */
  --text:   #1E293B;
  --text-2: #475569;
  --muted:  #94A3B8;
  --border: #CBD5E1;

  /* ---- CLAY SHADOW SYSTEM ----
     dual-shadow = outer dark (bottom-right) + outer light (top-left)
     creates the "raised clay" 3D effect               */

  /* Light clay raised — for cards & panels */
  --clay-raised:
    8px 8px 24px rgba(163, 177, 210, 0.65),
    -4px -4px 14px rgba(255, 255, 255, 0.92);

  --clay-raised-sm:
    4px 4px 12px rgba(163, 177, 210, 0.55),
    -2px -2px 8px rgba(255, 255, 255, 0.85);

  --clay-raised-lg:
    14px 14px 36px rgba(163, 177, 210, 0.7),
    -7px -7px 20px rgba(255, 255, 255, 0.95);

  /* Blue clay raised — for colored elements */
  --clay-blue:
    6px 6px 18px rgba(9, 30, 74, 0.45),
    -2px -2px 8px rgba(100, 181, 246, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);

  --clay-blue-sm:
    3px 3px 10px rgba(9, 30, 74, 0.4),
    -1px -1px 5px rgba(100, 181, 246, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);

  --clay-blue-lg:
    10px 10px 28px rgba(9, 30, 74, 0.5),
    -4px -4px 12px rgba(100, 181, 246, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.15);

  /* Inset clay — for inputs (recessed look) */
  --clay-inset:
    inset 4px 4px 10px rgba(163, 177, 210, 0.5),
    inset -3px -3px 8px rgba(255, 255, 255, 0.82);

  --clay-inset-focus:
    inset 3px 3px 7px rgba(163, 177, 210, 0.38),
    inset -2px -2px 6px rgba(255, 255, 255, 0.72),
    0 0 0 3px rgba(21, 101, 192, 0.18);

  /* Press — for button active state */
  --clay-pressed:
    inset 3px 3px 8px rgba(9, 30, 74, 0.35),
    inset -1px -1px 4px rgba(255, 255, 255, 0.1);

  /* Border radius */
  --r-xl:   24px;
  --r-lg:   18px;
  --r-md:   12px;
  --r-sm:   8px;
  --r-pill: 100px;
}

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

body {
  font-family: 'Inter', 'Source Sans Pro', sans-serif !important;
  background-color: var(--clay-surface) !important;
  color: var(--text) !important;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { transition: color .18s; }

/* ================================================================
   SIDEBAR — Blue clay panel
   ================================================================ */
.main-sidebar,
.left-side {
  background: linear-gradient(168deg, var(--b950) 0%, var(--b900) 30%, var(--b800) 65%, var(--b700) 100%) !important;
  box-shadow: 6px 0 30px rgba(9, 30, 74, 0.4), inset -1px 0 0 rgba(255,255,255,0.06) !important;
}

/* Full-width header bottom shadow — covers both logo strip and navbar */
.main-header {
  box-shadow: 0 3px 14px rgba(163,177,210,0.4) !important;
  z-index: 1030 !important;
}

/* Logo strip */
.main-header .logo {
  background: var(--b950) !important;
  border-bottom: none !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: .4px;
  box-shadow: none !important;
}
.main-header .logo:hover { background: #061535 !important; }
.main-header .logo .logo-mini {
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -1px;
}

/* Sidebar user panel */
.user-panel {
  padding: 16px 14px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  margin-bottom: 6px;
}
.user-panel .info > p {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  margin: 0 0 2px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 138px;
}
.user-panel .info > a {
  color: rgba(255,255,255,0.5) !important;
  font-size: 11.5px !important;
}
.user-panel .info > a i { color: #69F0AE !important; font-size: 8px; }

.img-profil {
  width: 38px !important;
  height: 38px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.2) !important;
  border: none !important;
}

/* Section headers */
.sidebar-menu li.header {
  color: rgba(255,255,255,0.35) !important;
  background: transparent !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  padding: 20px 20px 6px !important;
  text-transform: uppercase !important;
  position: relative;
}
.sidebar-menu li.header::before {
  content: '';
  display: block;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 10px;
}

/* Menu items */
.sidebar-menu > li { margin: 0; }
.sidebar-menu > li > a {
  color: rgba(255,255,255,0.68) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  padding: 10px 12px 10px 14px !important;
  margin: 2px 10px !important;
  border-radius: 10px !important;
  border-left: none !important;
  transition: all .2s ease !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}
.sidebar-menu > li > a i {
  color: rgba(255,255,255,0.5) !important;
  width: 20px !important;
  text-align: center !important;
  font-size: 15px !important;
  flex-shrink: 0;
  transition: color .2s !important;
}
.sidebar-menu > li > a span { flex: 1; line-height: 1.3; }

/* Hover state */
.sidebar-menu > li > a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    2px 3px 10px rgba(0,0,0,0.18) !important;
}
.sidebar-menu > li > a:hover i { color: var(--b200) !important; }

/* Active state — bright pill */
.sidebar-menu > li.active > a {
  color: #fff !important;
  background: rgba(255,255,255,0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    inset 0 1px 2px rgba(255,255,255,0.4),
    3px 4px 14px rgba(0,0,0,0.28) !important;
}
.sidebar-menu > li.active > a i { color: var(--b100) !important; }

/* ---- Collapsed sidebar (sidebar-mini) ---- */
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
  margin: 2px 6px !important;
  padding: 11px 8px !important;
  border-radius: 10px !important;
  justify-content: center !important;
  gap: 0 !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a i {
  font-size: 16px !important;
  width: 22px !important;
  text-align: center !important;
  margin: 0 !important;
}
/* Hide section headers in collapsed mode */
.sidebar-mini.sidebar-collapse .sidebar-menu li.header {
  padding: 4px 0 !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu li.header::before { display: none !important; }

/* User panel in collapsed mode — center avatar, hide name/status */
.sidebar-mini.sidebar-collapse .user-panel {
  padding: 10px 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.sidebar-mini.sidebar-collapse .user-panel .pull-left {
  float: none !important;
  margin: 0 !important;
}
.sidebar-mini.sidebar-collapse .user-panel .info {
  display: none !important;
}
.sidebar-mini.sidebar-collapse .user-panel img.img-profil {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
}

/* Sidebar scrollbar */
.sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ================================================================
   TOP NAVBAR — white clay bar
   ================================================================ */
.main-header .navbar {
  background: var(--clay-white) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  min-height: 50px !important;
}

/* Sidebar toggle — AdminLTE renders the icon via ::before, don't add icon in HTML */
.main-header .navbar .sidebar-toggle {
  color: var(--text-2) !important;
  padding: 0 18px !important;
  height: 50px !important;
  display: inline-flex !important;
  align-items: center !important;
  border-right: 1px solid rgba(203,213,225,0.4) !important;
  transition: all .2s;
  font-size: 16px;
}
.main-header .navbar .sidebar-toggle:hover {
  color: var(--b700) !important;
  background: var(--b50) !important;
}

/* Nav items */
.navbar-custom-menu > .nav > li > a {
  color: var(--text-2) !important;
  transition: all .18s;
}
.navbar-custom-menu > .nav > li > a:hover {
  color: var(--b700) !important;
  background: var(--b50) !important;
}

/* User dropdown toggle button */
.navbar-nav .user-menu > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px;
  padding: 0 18px !important;
  height: 50px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  font-size: 13.5px;
  border-left: 1px solid rgba(203,213,225,0.4) !important;
  transition: background .18s !important;
}
.navbar-nav .user-menu > a:hover {
  background: var(--b50) !important;
}
/* Avatar in navbar */
.navbar-nav .user-menu > a .user-image.img-profil {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  flex-shrink: 0;
}
/* Username text in navbar */
.navbar-nav .user-menu > a > span.hidden-xs {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-nav .user-menu .dropdown-menu {
  border: none !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--clay-raised-lg) !important;
  overflow: hidden;
  min-width: 230px;
  margin-top: 6px;
}
.navbar-nav .user-menu .dropdown-menu .user-header {
  background: linear-gradient(145deg, var(--b900), var(--b700)) !important;
  padding: 20px 18px;
}
.navbar-nav .user-menu .dropdown-menu .user-header img {
  width: 58px !important;
  height: 58px !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.3) !important;
  border: none !important;
  border-radius: 50% !important;
}
.navbar-nav .user-menu .dropdown-menu .user-header > p {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  margin-top: 10px;
}
.navbar-nav .user-menu .dropdown-menu .user-header > p strong {
  font-weight: 700;
  font-size: 14px;
  display: block;
  color: #fff;
}
.navbar-nav .user-menu .user-footer {
  background: var(--clay-surface);
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
}

/* ================================================================
   CONTENT WRAPPER
   ================================================================ */
.content-wrapper { background: var(--clay-surface) !important; }

.content-header {
  background: var(--clay-white) !important;
  border-bottom: none !important;
  padding: 16px 24px 14px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 3px 14px rgba(163,177,210,0.3) !important;
}
.content-header > h1 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -.4px;
  line-height: 1.2;
  margin: 0 !important;
}

/* Breadcrumb */
.content-header .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 5px 0 0 !important;
  font-size: 12px !important;
}
.content-header .breadcrumb > li + li::before { color: #B0BEC5; }
.content-header .breadcrumb a { color: var(--b700); }
.content-header .breadcrumb .active { color: var(--muted); }

/* ================================================================
   CLAY CARD — replaces .box
   ================================================================ */
.box {
  border-radius: var(--r-xl) !important;
  border: none !important;
  background: var(--clay-white) !important;
  box-shadow: var(--clay-raised) !important;
  margin-bottom: 24px !important;
  transition: box-shadow .25s, transform .25s;
}
.box:hover {
  box-shadow:
    10px 10px 28px rgba(163,177,210,0.7),
    -5px -5px 16px rgba(255,255,255,0.95) !important;
}

.box .box-header {
  padding: 14px 20px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(203,213,225,0.55) !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 8px;
}
.box .box-header .box-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -.1px;
  flex: 1;
}
/* btn-group inside box-header */
.box .box-header .btn-group { margin: 0 !important; }
.box .box-header .btn-group .btn { margin: 0 1px !important; }

.box .box-body { padding: 20px !important; }

.box .box-footer {
  background: linear-gradient(to bottom, var(--clay-bg), var(--clay-surface)) !important;
  border-top: 1px solid rgba(203,213,225,0.5) !important;
  border-radius: 0 0 var(--r-xl) var(--r-xl) !important;
  padding: 12px 20px !important;
}

/* Box accent tops */
.box.box-primary { box-shadow: var(--clay-raised), 0 -3px 0 var(--b700) inset !important; }
.box.box-success  { box-shadow: var(--clay-raised), 0 -3px 0 var(--green) inset !important; }
.box.box-danger   { box-shadow: var(--clay-raised), 0 -3px 0 var(--red) inset !important; }
.box.box-warning  { box-shadow: var(--clay-raised), 0 -3px 0 var(--amber) inset !important; }

/* ================================================================
   STAT SMALL-BOX — clay tiles
   ================================================================ */
.small-box {
  border-radius: var(--r-xl) !important;
  border: none !important;
  overflow: hidden !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.small-box:hover {
  transform: translateY(-5px) !important;
}

.small-box h3 {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.small-box p {
  font-size: 13px !important;
  font-weight: 600 !important;
  opacity: .88 !important;
  margin-top: 5px !important;
  letter-spacing: .2px;
}
.small-box .icon {
  font-size: 76px !important;
  opacity: .15 !important;
}
.small-box .small-box-footer {
  padding: 9px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  backdrop-filter: brightness(.88) !important;
  transition: backdrop-filter .2s !important;
}
.small-box .small-box-footer:hover {
  backdrop-filter: brightness(.78) !important;
}

/* Clay colored tiles */
.small-box.bg-aqua {
  background: linear-gradient(145deg, #0288D1, #0277BD, #01579B) !important;
  box-shadow: var(--clay-blue-lg) !important;
}
.small-box.bg-green {
  background: linear-gradient(145deg, #388E3C, #2E7D32, #1B5E20) !important;
  box-shadow:
    10px 10px 28px rgba(27,94,32,0.5),
    -4px -4px 12px rgba(129,199,132,0.18),
    inset 0 2px 0 rgba(255,255,255,0.15) !important;
}
.small-box.bg-yellow {
  background: linear-gradient(145deg, #FB8C00, #F57F17, #E65100) !important;
  box-shadow:
    10px 10px 28px rgba(230,81,0,0.45),
    -4px -4px 12px rgba(255,183,77,0.2),
    inset 0 2px 0 rgba(255,255,255,0.15) !important;
}
.small-box.bg-red {
  background: linear-gradient(145deg, #D32F2F, #C62828, #B71C1C) !important;
  box-shadow:
    10px 10px 28px rgba(183,28,28,0.5),
    -4px -4px 12px rgba(229,115,115,0.18),
    inset 0 2px 0 rgba(255,255,255,0.15) !important;
}
.small-box.bg-blue {
  background: linear-gradient(145deg, var(--b600), var(--b700), var(--b900)) !important;
  box-shadow: var(--clay-blue-lg) !important;
}

/* ================================================================
   CLAY BUTTONS
   ================================================================ */
.btn,
.btn-flat {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .2px;
  border-radius: var(--r-md) !important;
  border: none !important;
  padding: 8px 18px !important;
  transition: all .2s ease !important;
  position: relative;
}
.btn:active, .btn-flat:active { transform: translateY(1px); }

/* Sizes */
.btn-xs, .btn-xs.btn-flat { padding: 6px 13px !important; font-size: 12.5px !important; border-radius: var(--r-sm) !important; }
.btn-sm, .btn-sm.btn-flat { padding: 7px 15px !important; font-size: 13px !important; }
.btn-lg, .btn-lg.btn-flat { padding: 12px 30px !important; font-size: 15px !important; border-radius: 14px !important; }

/* Primary */
.btn-primary, .btn-primary.btn-flat {
  background: linear-gradient(145deg, var(--b600), var(--b800)) !important;
  color: #fff !important;
  box-shadow: var(--clay-blue-sm) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(145deg, var(--b700), var(--b900)) !important;
  box-shadow: var(--clay-blue) !important;
  transform: translateY(-2px);
  color: #fff !important;
}
.btn-primary:active {
  box-shadow: var(--clay-pressed) !important;
  transform: translateY(1px);
}

/* Success */
.btn-success, .btn-success.btn-flat {
  background: linear-gradient(145deg, #43A047, #2E7D32) !important;
  color: #fff !important;
  box-shadow:
    3px 3px 10px rgba(27,94,32,0.45),
    -1px -1px 5px rgba(129,199,132,0.15),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.btn-success:hover, .btn-success:focus {
  background: linear-gradient(145deg, #388E3C, #1B5E20) !important;
  box-shadow:
    5px 5px 14px rgba(27,94,32,0.5),
    -2px -2px 7px rgba(129,199,132,0.15) !important;
  transform: translateY(-2px);
  color: #fff !important;
}

/* Danger */
.btn-danger, .btn-danger.btn-flat {
  background: linear-gradient(145deg, #EF5350, #C62828) !important;
  color: #fff !important;
  box-shadow:
    3px 3px 10px rgba(183,28,28,0.45),
    -1px -1px 5px rgba(229,115,115,0.15),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.btn-danger:hover, .btn-danger:focus {
  background: linear-gradient(145deg, #E53935, #B71C1C) !important;
  transform: translateY(-2px);
  color: #fff !important;
}

/* Info */
.btn-info, .btn-info.btn-flat {
  background: linear-gradient(145deg, #039BE5, #0277BD) !important;
  color: #fff !important;
  box-shadow:
    3px 3px 10px rgba(1,87,155,0.4),
    -1px -1px 5px rgba(79,195,247,0.15),
    inset 0 1px 0 rgba(255,255,255,0.2) !important;
}
.btn-info:hover, .btn-info:focus {
  background: linear-gradient(145deg, #0288D1, #01579B) !important;
  transform: translateY(-2px);
  color: #fff !important;
}

/* Warning */
.btn-warning, .btn-warning.btn-flat {
  background: linear-gradient(145deg, #FFA726, #F57F17) !important;
  color: #fff !important;
  box-shadow:
    3px 3px 10px rgba(230,81,0,0.38),
    -1px -1px 5px rgba(255,183,77,0.15),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.btn-warning:hover, .btn-warning:focus {
  background: linear-gradient(145deg, #FB8C00, #E65100) !important;
  transform: translateY(-2px);
  color: #fff !important;
}

/* Default */
.btn-default, .btn-default.btn-flat {
  background: var(--clay-white) !important;
  color: var(--text-2) !important;
  box-shadow: var(--clay-raised-sm) !important;
  border: none !important;
}
.btn-default:hover, .btn-default:focus {
  background: var(--clay-surface) !important;
  color: var(--text) !important;
}

/* ================================================================
   CLAY INPUTS — recessed look
   ================================================================ */
.form-control {
  border: none !important;
  border-radius: var(--r-md) !important;
  background: var(--clay-bg) !important;
  box-shadow: var(--clay-inset) !important;
  padding: 9px 14px !important;
  font-size: 13.5px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--text) !important;
  height: auto !important;
  transition: box-shadow .2s, background .2s !important;
}
.form-control:focus {
  background: #EEF4FF !important;
  box-shadow: var(--clay-inset-focus) !important;
  outline: none !important;
  color: var(--text) !important;
}
.form-control[readonly] {
  background: var(--clay-surface) !important;
  opacity: .8;
  cursor: default;
}
.form-control::placeholder { color: var(--muted) !important; }

/* Select arrow */
select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%2394A3B8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 32px !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Input group */
.input-group .form-control:not(:last-child) {
  border-radius: var(--r-md) 0 0 var(--r-md) !important;
}
.input-group-addon {
  background: var(--clay-bg) !important;
  border: none !important;
  box-shadow: var(--clay-inset) !important;
  color: var(--muted) !important;
  border-radius: var(--r-md) 0 0 var(--r-md) !important;
}
.input-group-addon + .form-control {
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
  box-shadow: inset 4px 4px 10px rgba(163,177,210,0.5), inset 0 -3px 8px rgba(255,255,255,0.82) !important;
}
.input-group-btn .btn {
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
  height: 40px;
}

/* Labels */
.form-group label,
.control-label {
  font-weight: 600 !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 7px !important;
}

/* Error state */
.has-error .form-control {
  box-shadow:
    inset 4px 4px 10px rgba(198,40,40,0.2),
    inset -3px -3px 8px rgba(255,255,255,0.8),
    0 0 0 3px rgba(198,40,40,0.12) !important;
}
.help-block { font-size: 12px !important; color: var(--muted) !important; }
.has-error .help-block { color: var(--red) !important; }

/* ================================================================
   CLAY MODAL
   ================================================================ */
.modal-content {
  border: none !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--clay-raised-lg) !important;
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(145deg, var(--b900), var(--b700)) !important;
  padding: 18px 24px !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.1);
}
.modal-header .modal-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -.1px;
}
.modal-header .close {
  color: rgba(255,255,255,.7) !important;
  opacity: 1 !important;
  text-shadow: none !important;
  font-size: 22px !important;
}
.modal-header .close:hover { color: #fff !important; }

.modal-body { padding: 24px !important; background: var(--clay-white); }

.modal-footer {
  background: linear-gradient(to bottom, var(--clay-bg), var(--clay-surface)) !important;
  border-top: 1px solid rgba(203,213,225,0.5) !important;
  padding: 14px 22px !important;
}

/* ================================================================
   CLAY TABLE
   ================================================================ */
.table-responsive { border-radius: var(--r-lg); overflow: hidden; }

.table > thead > tr > th {
  background: linear-gradient(to bottom, var(--clay-bg), var(--clay-surface)) !important;
  color: var(--text-2) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .9px !important;
  border-bottom: 2px solid rgba(203,213,225,0.7) !important;
  padding: 12px 16px !important;
  white-space: nowrap;
  vertical-align: middle !important;
}
.table > tbody > tr > td {
  padding: 11px 16px !important;
  vertical-align: middle !important;
  border-color: rgba(203,213,225,0.4) !important;
  color: var(--text) !important;
  font-size: 13.5px !important;
}
.table-bordered { border-color: rgba(203,213,225,0.5) !important; }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border-color: rgba(203,213,225,0.4) !important; }

.table > tbody > tr:hover > td {
  background: var(--b50) !important;
  transition: background .15s;
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: rgba(227,242,253,0.3) !important;
}

/* ================================================================
   DATATABLES — clean controls layout
   ================================================================ */

/* DataTable selects & inputs */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: none !important;
  border-radius: var(--r-sm) !important;
  background: var(--clay-bg) !important;
  box-shadow: var(--clay-inset) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--text) !important;
  outline: none;
}
.dataTables_wrapper .dataTables_filter input:focus {
  box-shadow: var(--clay-inset-focus) !important;
}
.dataTables_wrapper .dataTables_length select { min-width: 56px; }
.dataTables_wrapper .dataTables_filter input  { min-width: 180px; }

/* Labels */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  font-weight: 500 !important;
  color: var(--text-2) !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Info text */
.dataTables_wrapper .dataTables_info {
  font-size: 12.5px !important;
  color: var(--muted) !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0 !important;
  line-height: 32px !important;
}

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate { padding: 0 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--r-sm) !important;
  border: none !important;
  font-size: 12.5px !important;
  font-family: 'Inter', sans-serif !important;
  padding: 5px 10px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  background: transparent !important;
  margin: 0 1px !important;
  line-height: 1.4 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--clay-bg) !important;
  box-shadow: var(--clay-raised-sm) !important;
  color: var(--b700) !important;
  border: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: linear-gradient(145deg, var(--b600), var(--b800)) !important;
  box-shadow: var(--clay-blue-sm) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--r-sm) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ---- Controls inside box-body.table-responsive ----
   DataTable injects .dataTables_wrapper with Bootstrap .row divs.
   We must zero Bootstrap's -15px margins and add our own padding.    */
.box-body.table-responsive .dataTables_wrapper > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Top controls row: Show/Search */
.box-body.table-responsive .dataTables_wrapper > .row:first-child {
  padding: 14px 20px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(203,213,225,0.4) !important;
}
.box-body.table-responsive .dataTables_wrapper > .row:first-child > div {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}
/* Bottom controls row: Info/Pagination */
.box-body.table-responsive .dataTables_wrapper > .row:last-child {
  padding: 10px 20px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  border-top: 1px solid rgba(203,213,225,0.4) !important;
}
.box-body.table-responsive .dataTables_wrapper > .row:last-child > div {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
}
/* Middle row: col-sm-12 (only used by the table row) — flush to edges */
.box-body.table-responsive .dataTables_wrapper .col-sm-12 {
  padding: 0 !important;
}

/* ================================================================
   TRANSACTION PAGE — payment display
   ================================================================ */
.tampil-bayar {
  background: linear-gradient(145deg, var(--b900), var(--b700)) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: -1px;
  box-shadow: var(--clay-blue-lg) !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.tampil-terbilang {
  background: linear-gradient(to bottom, var(--b50), #D8EAFD) !important;
  color: var(--b800) !important;
  border-radius: 0 0 var(--r-xl) var(--r-xl) !important;
  padding: 11px 18px !important;
  font-style: italic;
  font-size: 13px !important;
  font-weight: 500;
  border: 1px solid rgba(144,202,249,0.4);
  border-top: none;
  margin-bottom: 18px;
}

/* ================================================================
   ALERTS — clay style
   ================================================================ */
.alert {
  border-radius: var(--r-md) !important;
  border: none !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 13px 18px !important;
  box-shadow: var(--clay-raised-sm) !important;
}
.alert-success { background: #E8F5E9 !important; color: var(--green) !important; }
.alert-danger  { background: #FFEBEE !important; color: var(--red) !important; }
.alert-warning { background: #FFF8E1 !important; color: var(--amber) !important; }
.alert-info    { background: var(--b50) !important; color: var(--b700) !important; }

/* ================================================================
   FOOTER
   ================================================================ */
.main-footer {
  background: var(--clay-white) !important;
  border-top: none !important;
  box-shadow: 0 -4px 16px rgba(163,177,210,0.3) !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  padding: 14px 24px !important;
}
.main-footer a { color: var(--b700) !important; }

/* ================================================================
   BADGE / LABEL
   ================================================================ */
.badge, .label {
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
  padding: 3px 9px !important;
  letter-spacing: .3px;
}
.badge-primary, .label-primary { background: var(--b700) !important; }
.badge-success, .label-success { background: var(--green) !important; }
.badge-danger,  .label-danger  { background: var(--red) !important; }
.badge-warning, .label-warning { background: var(--amber) !important; color: #fff !important; }

/* ================================================================
   LOGIN PAGE — Clay card on blue gradient
   ================================================================ */
.login-page {
  background: linear-gradient(145deg, var(--b950) 0%, var(--b900) 40%, var(--b800) 75%, var(--b700) 100%) !important;
  min-height: 100vh;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  overflow: hidden;
}

/* Decorative blobs */
.login-page::before {
  content: '';
  position: fixed;
  width: 500px;
  height: 500px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  top: -180px;
  right: -120px;
  pointer-events: none;
}
.login-page::after {
  content: '';
  position: fixed;
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.03);
  border-radius: 50%;
  bottom: -150px;
  left: -100px;
  pointer-events: none;
}

.login-box {
  width: 420px !important;
  margin: 0 auto !important;
  position: relative;
  z-index: 1;
}

.login-box-body {
  border-radius: var(--r-xl) !important;
  padding: 38px 40px !important;
  background: var(--clay-white) !important;
  border: none !important;
  box-shadow:
    20px 20px 50px rgba(9, 30, 74, 0.45),
    -8px -8px 24px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ================================================================
   MISC IMPROVEMENTS
   ================================================================ */

/* Progress */
.progress {
  border-radius: var(--r-pill) !important;
  height: 8px !important;
  background: var(--clay-bg) !important;
  box-shadow: var(--clay-inset) !important;
}
.progress-bar {
  border-radius: var(--r-pill) !important;
  background: linear-gradient(90deg, var(--b600), var(--b800)) !important;
  box-shadow: 0 2px 6px rgba(21,101,192,0.4) !important;
}

/* Overlay */
.overlay {
  border-radius: var(--r-xl) !important;
  background: rgba(255,255,255,0.7) !important;
}
.overlay > .fa { color: var(--b700) !important; }

/* Nav tabs */
.nav-tabs { border-bottom: 2px solid rgba(203,213,225,0.5) !important; }
.nav-tabs > li > a {
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  border: none !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  color: var(--b700) !important;
  border: none !important;
  border-bottom: 2px solid var(--b700) !important;
  box-shadow: none !important;
}

/* iCheck */
.icheckbox_square-blue,
.iradio_square-blue { border-radius: var(--r-xs) !important; }

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--clay-bg); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: #B0BEC5; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--b700); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .login-box { width: 360px !important; }
  .login-box-body { padding: 28px 24px !important; }
  .content-header > h1 { font-size: 17px !important; }
  .small-box h3 { font-size: 26px !important; }
  .tampil-bayar { font-size: 2.4em !important; }
  .box { border-radius: var(--r-lg) !important; }
}
@media (max-width: 480px) {
  .login-box { width: 96vw !important; }
  .login-box-body { padding: 22px 18px !important; }
}

/* ================================================================
   NEATNESS FIXES — targeted polish
   ================================================================ */

/* Sidebar logo mini — bigger and bolder when collapsed */
.sidebar-mini.sidebar-collapse .main-header .logo .logo-mini {
  font-size: 18px !important;
  letter-spacing: -1px;
}

/* Prevent logo wrapping */
.main-header .logo .logo-lg {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---- Box / table cleanup ---- */
.box .table-responsive { border-radius: 0 !important; margin: 0 !important; }
.box .box-body.table-responsive { padding: 0 !important; }
.box .box-body.table-responsive .table { margin: 0 !important; }
.box .box-body > .table-responsive { border-radius: 0 !important; }
.box > .box-body .table > tbody > tr:last-child > td { border-bottom: none !important; }

/* Badge inside table */
.table .badge, .table .label { font-size: 11px !important; }

/* Btn-group inside box-header */
.box-header .btn-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap;
}
.box-header .btn-group .btn { margin: 0 !important; border-radius: var(--r-sm) !important; }

/* Sidebar first item top spacing */
.sidebar-menu > li:first-of-type { margin-top: 6px; }

/* Active sidebar icon glow */
.sidebar-menu > li.active > a i {
  filter: drop-shadow(0 0 5px rgba(187,222,251,0.8));
}

/* Content header breadcrumb right align */
.content-header .breadcrumb {
  text-align: right !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Row inside box-body proper spacing */
.box .box-body .row {
  margin-left: -8px;
  margin-right: -8px;
}
.box .box-body .row [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}

/* Clearfix for DataTables bottom row */
.dataTables_wrapper .row:last-child::after {
  content: '';
  display: table;
  clear: both;
}