/* ==========================================================================
   Kolkata Today CMS — admin.css (full rewrite, polished)
   ========================================================================== */
:root {
  --kt-admin-red: #c0392b;
  --kt-admin-red-hover: #a82618;
  --kt-admin-dark: #2c3e50;
  --kt-admin-sidebar-w: 240px;
  --kt-admin-text: #2c3e50;
  --kt-admin-muted: #7f8c8d;
  --kt-admin-border: #e1e4e8;
  --kt-admin-border-strong: #c5c8cc;
  --kt-admin-bg: #f6f8fa;
  --kt-admin-input-bg: #fff;
  --kt-admin-focus: #3a8efb;
}
* { box-sizing: border-box; }
body.kt-admin {
  margin: 0;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: var(--kt-admin-bg);
  color: var(--kt-admin-text);
}
a { color: var(--kt-admin-red); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Sidebar ─────────────────────────────────────────────── */
.kt-admin-sidebar { position: fixed; left: 0; top: 0; width: var(--kt-admin-sidebar-w); height: 100vh; background: var(--kt-admin-dark); color: #fff; display: flex; flex-direction: column; overflow-y: auto; z-index: 100; }
.kt-admin-logo { display: flex; flex-direction: column; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
.kt-admin-logo strong { font-family: 'Georgia', serif; font-size: 17px; }
.kt-admin-logo small { color: var(--kt-admin-red); font-size: 11px; text-transform: uppercase; letter-spacing: 2px; }
.kt-admin-sidebar ul { list-style: none; margin: 0; padding: 10px 0; flex: 1; }
.kt-admin-sidebar li a { display: block; padding: 9px 20px; color: rgba(255,255,255,.8); font-size: 13px; border-left: 3px solid transparent; }
.kt-admin-sidebar li a:hover, .kt-admin-sidebar li a.active { background: rgba(255,255,255,.05); color: #fff; border-left-color: var(--kt-admin-red); text-decoration: none; }
.kt-admin-sep { padding: 16px 20px 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.4); }
.kt-admin-user { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.kt-admin-user span { color: rgba(255,255,255,.8); }
.kt-admin-user button, .kt-admin-user a { background: none; border: 0; color: rgba(255,255,255,.6); padding: 0; font: inherit; cursor: pointer; text-align: left; }
.kt-admin-user button:hover, .kt-admin-user a:hover { color: #fff; text-decoration: underline; }

/* ─── Main content area ──────────────────────────────────── */
.kt-admin-main { margin-left: var(--kt-admin-sidebar-w); padding: 24px 30px; min-height: 100vh; }
.kt-page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 14px; flex-wrap: wrap; }
.kt-page-head h1 { font-size: 22px; margin: 0; font-weight: 700; }
.kt-page-actions { display: flex; gap: 8px; align-items: center; }
.muted { color: var(--kt-admin-muted); font-size: 13px; }

/* ─── Buttons ───────────────────────────────────────────── */
.kt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border: 1px solid var(--kt-admin-border-strong);
  border-radius: 4px;
  background: #fff;
  color: var(--kt-admin-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, border-color .12s;
  line-height: 1.2;
}
.kt-btn:hover { background: #f4f6f8; text-decoration: none; }
.kt-btn-primary { background: var(--kt-admin-red); border-color: var(--kt-admin-red); color: #fff; font-weight: 600; }
.kt-btn-primary:hover { background: var(--kt-admin-red-hover); border-color: var(--kt-admin-red-hover); color: #fff; }
.kt-btn.danger { background: #fff; border-color: #e0a0a0; color: var(--kt-admin-red); }
.kt-btn.danger:hover { background: #fdf0f0; }

/* ─── Form: foundation ─────────────────────────────────── */
.kt-form {
  background: #fff;
  border: 1px solid var(--kt-admin-border);
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.kt-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.kt-form-main { min-width: 0; }
.kt-form-side { min-width: 0; }

/* ─── Field building blocks ────────────────────────────── */
.kt-field {
  display: block;
  margin-bottom: 16px;
}
.kt-field > label,
.kt-field-row > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--kt-admin-text);
  margin-bottom: 6px;
}
.kt-field input[type=text],
.kt-field input[type=email],
.kt-field input[type=url],
.kt-field input[type=number],
.kt-field input[type=password],
.kt-field input[type=date],
.kt-field input[type=datetime-local],
.kt-field input[type=search],
.kt-field input:not([type]),
.kt-field select,
.kt-field textarea,
.kt-form input[type=text]:not(.kt-input-bare),
.kt-form input[type=email]:not(.kt-input-bare),
.kt-form input[type=url]:not(.kt-input-bare),
.kt-form input[type=number]:not(.kt-input-bare),
.kt-form input[type=password]:not(.kt-input-bare),
.kt-form input[type=date]:not(.kt-input-bare),
.kt-form input[type=datetime-local]:not(.kt-input-bare),
.kt-form input[type=search]:not(.kt-input-bare),
.kt-form input:not([type]):not(.kt-input-bare),
.kt-form select,
.kt-form textarea {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--kt-admin-border-strong);
  border-radius: 4px;
  font: inherit;
  background: var(--kt-admin-input-bg);
  color: var(--kt-admin-text);
  transition: border-color .12s, box-shadow .12s;
}
.kt-form input:focus,
.kt-form select:focus,
.kt-form textarea:focus {
  outline: 0;
  border-color: var(--kt-admin-focus);
  box-shadow: 0 0 0 3px rgba(58, 142, 251, .15);
}
.kt-form textarea { font-family: inherit; resize: vertical; min-height: 80px; }
.kt-form .kt-input-lg {
  font-size: 18px;
  font-weight: 600;
  padding: 11px 14px;
}
.kt-help {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--kt-admin-muted);
}

/* Inline checkbox */
.kt-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 13px;
  margin: 0;
  cursor: pointer;
  padding: 4px 0;
}
.kt-checkbox input[type=checkbox] {
  margin: 0;
  width: 16px;
  height: 16px;
}
.kt-checkbox span {
  flex: 1;
  font-weight: 500;
}
.kt-checkbox-group { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

/* Fieldset cards */
.kt-form .kt-fieldset,
.kt-form fieldset {
  border: 1px solid var(--kt-admin-border);
  border-radius: 6px;
  padding: 14px 16px 16px;
  margin: 0 0 18px;
  background: #fff;
}
.kt-form-side .kt-fieldset { background: #fafbfc; }
.kt-form legend {
  padding: 0 6px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--kt-admin-muted);
}
.kt-form-side .kt-field { margin-bottom: 12px; }
.kt-form-side .kt-field:last-child { margin-bottom: 0; }

/* Editor textarea base */
.kt-editor {
  min-height: 400px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

/* Jodit override (matches admin theme) */
.jodit-container { border-radius: 4px !important; margin-top: 0; border-color: var(--kt-admin-border-strong) !important; }
.jodit-toolbar__box { background: #fafbfc !important; border-bottom: 1px solid var(--kt-admin-border) !important; }

/* Categories picker */
.kt-cat-picker {
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--kt-admin-border);
  border-radius: 4px;
  padding: 8px 10px;
}
.kt-cat-picker .kt-checkbox { padding: 3px 0; }

/* Media picker */
.kt-media-picker { display: block; }
.kt-media-preview {
  background: #f0f3f6;
  border: 2px dashed var(--kt-admin-border-strong);
  border-radius: 6px;
  padding: 14px;
  text-align: center;
  margin-bottom: 8px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kt-media-preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: 4px;
}
.kt-media-preview:empty::before {
  content: 'No image selected';
  color: var(--kt-admin-muted);
  font-size: 12px;
  font-style: italic;
}
.kt-media-upload { width: 100%; padding: 6px; font-size: 12px; }

/* ─── Login page ─────────────────────────────────────────── */
/* ─── Login page (works whether body has .kt-login or .kt-admin-guest wrapper) ─── */
body.kt-login,
body.kt-admin:has(.kt-admin-guest) {
  background: linear-gradient(135deg, #2c3e50 0%, #c0392b 100%);
  margin: 0;
}
.kt-admin-guest {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 20px;
}
body.kt-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.kt-login-box {
  background: #fff;
  width: 380px;
  max-width: 92%;
  padding: 32px 32px 28px;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.kt-login-logo {
  display: block;
  text-align: center;
  font-family: 'Georgia', serif;
  font-size: 18px;
  margin-bottom: 6px;
  color: var(--kt-admin-text);
  text-decoration: none;
}
.kt-login-logo em { color: var(--kt-admin-red); font-style: italic; }
.kt-login-box h1 {
  text-align: center;
  font-size: 17px;
  margin: 0 0 22px;
  color: var(--kt-admin-text);
  font-weight: 600;
}
.kt-login-field {
  display: block;
  margin-bottom: 16px;
}
.kt-login-field > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--kt-admin-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}
.kt-login-field input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--kt-admin-border-strong);
  border-radius: 5px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.kt-login-field input:focus {
  outline: 0;
  border-color: var(--kt-admin-focus);
  box-shadow: 0 0 0 3px rgba(58, 142, 251, .15);
}

/* Password wrapper with eye toggle */
.kt-pwd-wrap { position: relative; }
.kt-pwd-wrap input { padding-right: 42px; }
.kt-pwd-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: var(--kt-admin-muted);
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color .12s, background .12s;
}
.kt-pwd-toggle:hover { color: var(--kt-admin-text); background: rgba(0,0,0,.04); }
.kt-pwd-toggle:focus { outline: 0; box-shadow: 0 0 0 2px rgba(58, 142, 251, .3); }

.kt-login-submit {
  width: 100%;
  padding: 12px;
  background: var(--kt-admin-red);
  color: #fff;
  border: 0;
  border-radius: 5px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
  transition: background .12s;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.kt-login-submit:hover { background: var(--kt-admin-red-hover); }

/* Flash messages */
.kt-flash {
  padding: 10px 14px;
  border-radius: 5px;
  margin-bottom: 16px;
  font-size: 13px;
}
.kt-flash.error { background: #fce8e8; color: #a83232; border: 1px solid #f3c2c2; }
.kt-flash.success { background: #e6f4ea; color: #1e7a3a; border: 1px solid #bce0c5; }

/* ─── Tables ────────────────────────────────────────────── */
.kt-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--kt-admin-border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
}
.kt-table thead { background: #fafbfc; }
.kt-table th, .kt-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--kt-admin-border);
  vertical-align: middle;
}
.kt-table tbody tr:hover { background: #fafbfc; }
.kt-table th { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--kt-admin-muted); }

/* ─── Stats grid (dashboard) ──────────────────────────── */
.kt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.kt-stat { background: #fff; border: 1px solid var(--kt-admin-border); border-radius: 6px; padding: 18px; }
.kt-stat strong { display: block; font-size: 26px; font-weight: 700; color: var(--kt-admin-text); }
.kt-stat span { font-size: 12px; color: var(--kt-admin-muted); text-transform: uppercase; letter-spacing: .5px; }

/* ─── Two-col layout (dashboard, etc.) ──────────────── */
.kt-two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

/* ─── Inline form (delete inside other form) ───────── */
.inline { display: inline; }

/* ─── Field row layout ──────────────────────────────── */
.kt-field-row { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* ─── Responsive ────────────────────────────────────── */
@media (max-width: 1024px) {
  .kt-form-grid, .kt-two-col, .kt-stats { grid-template-columns: 1fr; }
  .kt-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .kt-admin-sidebar { position: static; width: 100%; height: auto; }
  .kt-admin-main { margin-left: 0; padding: 16px; }
  .kt-stats { grid-template-columns: 1fr; }
}
/* ==========================================================================
   Kolkata Today CMS — admin-extras.css
   Missing admin list/table/filter styles. APPEND to admin.css.
   ========================================================================== */

/* ─── Filters bar (status tabs: All | Published | Drafts) ───────────── */
.kt-filters {
  display: flex;
  gap: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--kt-admin-border);
  margin-bottom: 18px;
  font-size: 13px;
}
.kt-filters a {
  color: var(--kt-admin-red);
  padding: 4px 14px;
  border-right: 1px solid var(--kt-admin-border);
  text-decoration: none;
}
.kt-filters a:first-child { padding-left: 0; }
.kt-filters a:last-child { border-right: 0; }
.kt-filters a:hover { text-decoration: underline; }
.kt-filters a.active {
  color: var(--kt-admin-text);
  font-weight: 700;
}

/* ─── Table enhancements ─────────────────────────────────────────── */
.kt-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--kt-admin-border);
  border-radius: 6px;
  overflow: hidden;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.kt-table thead {
  background: #fafbfc;
}
.kt-table th {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--kt-admin-border);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--kt-admin-muted);
}
.kt-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--kt-admin-border);
  vertical-align: middle;
  color: var(--kt-admin-text);
}
.kt-table tbody tr:last-child td { border-bottom: 0; }
.kt-table tbody tr:hover { background: #fafbfc; }
.kt-table td a {
  color: var(--kt-admin-red);
  text-decoration: none;
  font-weight: 500;
}
.kt-table td a:hover { text-decoration: underline; }

/* Title column: primary link, larger */
.kt-table td:first-child a {
  font-weight: 600;
  color: var(--kt-admin-text);
}
.kt-table td:first-child a:hover {
  color: var(--kt-admin-red);
}

/* Empty state */
.kt-empty {
  text-align: center;
  padding: 40px 20px !important;
  color: var(--kt-admin-muted);
  font-style: italic;
}

/* ─── Status badges (published / draft / scheduled / etc) ─────────── */
.kt-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  line-height: 1.4;
}
.kt-status-published { background: #d4edda; color: #155724; }
.kt-status-draft     { background: #e2e3e5; color: #4c5155; }
.kt-status-scheduled { background: #fff3cd; color: #856404; }
.kt-status-private   { background: #d1ecf1; color: #0c5460; }
.kt-status-trash     { background: #f8d7da; color: #721c24; }

/* ─── Table action links (View/Edit/Delete in last column) ────────── */
.kt-table-actions {
  text-align: right;
  white-space: nowrap;
}
.kt-table-actions a,
.kt-table-actions .kt-linkbtn {
  display: inline-block;
  padding: 4px 10px;
  margin-left: 4px;
  font-size: 12px;
  border: 1px solid var(--kt-admin-border);
  border-radius: 3px;
  color: var(--kt-admin-text);
  text-decoration: none;
  background: #fff;
  font-weight: 500;
  transition: background .12s, border-color .12s;
}
.kt-table-actions a:hover,
.kt-table-actions .kt-linkbtn:hover {
  background: #f4f6f8;
  border-color: var(--kt-admin-border-strong);
  text-decoration: none;
}
.kt-linkbtn {
  background: none;
  border: 1px solid var(--kt-admin-border);
  font: inherit;
  cursor: pointer;
}
.kt-linkbtn.danger {
  color: var(--kt-admin-red);
  border-color: #e0a0a0;
}
.kt-linkbtn.danger:hover {
  background: #fdf0f0;
  border-color: var(--kt-admin-red);
  color: var(--kt-admin-red);
}
.kt-table-actions form.inline {
  display: inline;
}

/* ─── Pagination ──────────────────────────────────────────────────── */
.kt-pagination {
  margin-top: 22px;
}
.kt-pagination ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
}
.kt-pagination li a {
  display: inline-block;
  padding: 7px 13px;
  border: 1px solid var(--kt-admin-border);
  border-radius: 4px;
  font-size: 13px;
  color: var(--kt-admin-text);
  text-decoration: none;
  background: #fff;
  min-width: 36px;
  text-align: center;
  font-weight: 500;
  transition: background .12s, border-color .12s;
}
.kt-pagination li a:hover {
  background: #f4f6f8;
  border-color: var(--kt-admin-border-strong);
  text-decoration: none;
}
.kt-pagination li.active a {
  background: var(--kt-admin-red);
  border-color: var(--kt-admin-red);
  color: #fff;
  font-weight: 600;
}
.kt-pagination li.disabled a {
  color: var(--kt-admin-muted);
  opacity: .5;
  pointer-events: none;
  cursor: default;
}

/* Responsive */
@media (max-width: 720px) {
  .kt-table { font-size: 12px; }
  .kt-table th, .kt-table td { padding: 8px 10px; }
  .kt-table-actions { white-space: normal; }
  .kt-table-actions a, .kt-table-actions .kt-linkbtn {
    margin: 2px;
    padding: 3px 8px;
    font-size: 11px;
  }
}
/* ─── Firefox datetime-local fix ─────────────────────── */
/* Firefox renders datetime-local differently from Chrome.
   Force consistent width and styling so time portion is always visible. */
input[type="datetime-local"] {
  min-width: 200px;
  font-family: inherit;
  -moz-appearance: textfield;
}
/* In Firefox, increase padding and show fallback text when empty */
@-moz-document url-prefix() {
  input[type="datetime-local"] {
    padding-right: 16px;
    min-height: 36px;
    letter-spacing: 0.3px;
  }
}