/* =========================
   MKCTV ADMIN THEME
   Consistent blue branding
   Modern cards + inputs
   ========================= */

:root{
  --bg: #071225;
  --panel: rgba(255,255,255,0.06);
  --panel-2: rgba(255,255,255,0.08);
  --border: rgba(146, 195, 255, 0.22);

  --text: #eaf2ff;
  --muted: rgba(234,242,255,0.72);

  --blue: #2ea8ff;
  --blue-2: #63b3ff;
  --indigo: #7b42f6;

  --danger: #ff4d4d;
  --warning: #ffb020;
  --success: #2ecc71;

  --shadow: 0 18px 50px rgba(0,0,0,0.35);
  --radius: 16px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 500px at 20% -10%, rgba(46,168,255,0.25), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(123,66,246,0.22), transparent 60%),
    linear-gradient(180deg, #050b18 0%, #071225 100%);
  min-height: 100vh;
}

/* Page shell */
.admin-shell{
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 18px 60px;
}

/* Top nav row */
.admin-nav{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

/* Topbar */
.admin-topbar{
  padding: 18px 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(46,168,255,0.14), rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

.topbar-left h1{
  margin:0;
  font-size: 28px;
  letter-spacing: 0.2px;
}

.muted{
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 14px;
}

/* Main content */
.admin-content{
  margin-top: 10px;
}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.05));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.card-head{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.card-title{
  margin:0;
  font-size: 18px;
}

.meta{
  margin-top: 8px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.meta-item strong{ color: rgba(234,242,255,0.9); font-weight: 600; }

/* Status pill */
.status-pill{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  text-transform: capitalize;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  white-space: nowrap;
}
.status-pill.published{
  border-color: rgba(46,204,113,0.35);
  background: rgba(46,204,113,0.12);
  color: #bfffe0;
}
.status-pill.draft{
  border-color: rgba(255,176,32,0.35);
  background: rgba(255,176,32,0.12);
  color: #ffe6b3;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(146,195,255,0.35);
}

.btn.primary{
  background: rgba(46,168,255,0.18);
  border-color: rgba(46,168,255,0.45);
}
.btn.warning{
  background: rgba(255,176,32,0.16);
  border-color: rgba(255,176,32,0.4);
}
.btn.danger{
  background: rgba(255,77,77,0.14);
  border-color: rgba(255,77,77,0.45);
}
.btn.ghost{
  background: rgba(255,255,255,0.04);
}

/* Card actions */
.card-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Forms */
.form-card{ padding: 18px; }

.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}

.field{ display:flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }

label{
  font-size: 13px;
  color: rgba(234,242,255,0.9);
  font-weight: 600;
}

input, select, textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(146,195,255,0.22);
  background: rgba(5, 12, 28, 0.55);
  color: var(--text);
  padding: 12px 12px;
  outline: none;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

textarea{
  min-height: 160px;
  resize: vertical;
  line-height: 1.5;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(46,168,255,0.65);
  box-shadow: 0 0 0 4px rgba(46,168,255,0.16);
}

select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,242,255,0.8) 50%),
    linear-gradient(135deg, rgba(234,242,255,0.8) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Form actions */
.form-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Empty state */
.empty-state{
  text-align:center;
  padding: 30px 18px;
  border-radius: var(--radius);
  border: 1px dashed rgba(146,195,255,0.25);
  background: rgba(255,255,255,0.04);
}
.empty-state h3{ margin:0 0 8px; }
.empty-state .btn{ margin-top: 8px; }

/* Auth login page support */
.auth{
  min-height: calc(100vh - 40px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 30px 18px;
}
.auth .card{
  width: min(520px, 100%);
}
.hint{
  color: var(--muted);
  margin-top: 12px;
  font-size: 13px;
}
code{
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Responsive */
@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
}


/* Location autocomplete */

.autocomplete { position: relative; }

.suggestions {

  position: absolute;

  left: 0;

  right: 0;

  top: calc(100% + 6px);

  background: #0f1d45;

  border: 1px solid rgba(120, 170, 255, 0.25);

  border-radius: 12px;

  overflow: hidden;

  display: none;

  z-index: 50;

  box-shadow: 0 10px 30px rgba(0,0,0,0.35);

}

.suggestions.open { display: block; }

.suggestion-item {

  width: 100%;

  text-align: left;

  padding: 10px 12px;

  background: transparent;

  border: 0;

  color: rgba(234,242,255,0.92);

  cursor: pointer;

  font-size: 14px;

}

.suggestion-item:hover {

  background: rgba(46,168,255,0.18);

}


.alerts {
  margin: 0 0 10px;
}

.alert {
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  font-size: 14px;
}

.alert-error {
  background: black;
  border: 1px solid #d33;
}

.alert-success {
  background: black;
  border: 1px solid #2d8a2d;
}

.alert-info {
  background: black;
  border: 1px solid #2b6cb0;
}



/* Dashboard layout */

.dash-grid{

  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: 14px;

}

@media (max-width: 960px){

  .dash-grid{ grid-template-columns: 1fr; }

}

/* Mini cards for status breakdown */

.mini-cards{

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}

@media (max-width: 720px){

  .mini-cards{ grid-template-columns: 1fr; }

}

.mini-card{

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(255,255,255,.04);

  border-radius: 14px;

  padding: 12px;

}

.mini-card .big{

  margin-top: 8px;

  font-size: 26px;

  font-weight: 800;

}

/* Chart container */

.chart-wrap{

  border: 1px solid rgba(255,255,255,.10);

  background: rgba(255,255,255,.03);

  border-radius: 14px;

  padding: 12px;

  overflow: hidden;

}

/* Table styling for dashboard */

.table-wrap{

  overflow: auto;

  border: 1px solid rgba(255,255,255,.10);

  border-radius: 14px;

}

.dash-table{

  width: 100%;

  border-collapse: collapse;

  min-width: 860px;

}

.dash-table thead th{

  text-align: left;

  font-size: 12px;

  letter-spacing: .02em;

  text-transform: uppercase;

  color: rgba(234,242,255,.75);

  padding: 12px 14px;

  background: rgba(255,255,255,.04);

  border-bottom: 1px solid rgba(255,255,255,.10);

}

.dash-table td{

  padding: 12px 14px;

  border-bottom: 1px solid rgba(255,255,255,.08);

  vertical-align: top;

}

.dash-table tbody tr:hover{

  background: rgba(255,255,255,.03);

}

/* Small status pill */

.pill{

  display: inline-block;

  padding: 6px 10px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.12);

  background: rgba(255,255,255,.04);

  color: rgba(234,242,255,.85);

  font-size: 12px;

}




/* =========================
  GLOBAL PAGE LOADER (MKCTV)
  ========================= */
.page-loader{
 position: fixed;
 inset: 0;
 z-index: 9999;
 display: grid;
 place-items: center;
 background: radial-gradient(1200px 700px at 50% 40%, rgba(18,40,90,.85), rgba(6,12,28,.96));
 backdrop-filter: blur(10px);
 opacity: 1;
 visibility: visible;
 transition: opacity .35s ease, visibility .35s ease;
}
.page-loader.is-hidden{
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
}
.loader-wrap{
 position: relative;
 width: 170px;
 height: 170px;
 display: grid;
 place-items: center;
}
.loader-logo{
 width: 74px;
 height: 74px;
 object-fit: contain;
 border-radius: 16px;
 filter: drop-shadow(0 10px 30px rgba(0,0,0,.55));
 transform: translateZ(0);
}
/* Tesla-ish modern ring */
.loader-ring{
 position: absolute;
 inset: 0;
 border-radius: 999px;
 /* base ring */
 border: 2px solid rgba(255,255,255,.08);
 /* moving highlight */
 background:
   conic-gradient(
     rgba(255,255,255,0) 0deg,
     rgba(255,255,255,0) 220deg,
     rgba(140,220,255,.95) 260deg,
     rgba(190,140,255,.85) 290deg,
     rgba(255,255,255,0) 330deg,
     rgba(255,255,255,0) 360deg
   );
 -webkit-mask: radial-gradient(transparent 58%, #000 60%);
 mask: radial-gradient(transparent 58%, #000 60%);
 filter: drop-shadow(0 0 14px rgba(140,220,255,.35));
 animation: ringSpin .9s linear infinite;
}
/* subtle pulsing glow behind */
.loader-wrap::before{
 content:"";
 position:absolute;
 inset: -18px;
 border-radius: 999px;
 background: radial-gradient(circle, rgba(140,220,255,.16), transparent 58%);
 filter: blur(8px);
 animation: glowPulse 1.6s ease-in-out infinite;
}
.loader-text{
 position: absolute;
 bottom: -30px;
 font-size: 12px;
 letter-spacing: .18em;
 text-transform: uppercase;
 color: rgba(234,242,255,.75);
}
@keyframes ringSpin{
 to { transform: rotate(360deg); }
}
@keyframes glowPulse{
 0%, 100% { opacity: .45; transform: scale(1); }
 50% { opacity: .9; transform: scale(1.03); }
}
/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
 .loader-ring{ animation: none; }
 .loader-wrap::before{ animation: none; }
}