/* Webniam CMS 4 - Mobile-first admin theme (Light + Orange accent) */
:root{
  --cms-accent: #f97316;      /* orange-500 */
  --cms-accent-600: #ea580c;  /* orange-600 */
  --cms-bg: #f6f8fb;
  --cms-surface: #ffffff;
  --cms-surface-2: #f1f5f9;
  --cms-border: rgba(15, 23, 42, .12);
  --cms-text: #0f172a;
  --cms-muted: rgba(51, 65, 85, .78);
  --cms-shadow: 0 10px 30px rgba(2, 8, 23, .08);
}

html, body{height:100%}
body{
  background:
    radial-gradient(900px 700px at 10% -10%, rgba(249,115,22,.18), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(59,130,246,.10), transparent 55%),
    linear-gradient(180deg, var(--cms-bg) 0%, #ffffff 100%);
  color: var(--cms-text);
  font-size: 14px;
  line-height: 1.45;
}

a{color: #0f172a; text-decoration-color: rgba(15,23,42,.28)}
a:hover{color: var(--cms-accent-600); text-decoration-color: rgba(234,88,12,.35)}

.navbar.cms-nav{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cms-border);
  box-shadow: 0 8px 22px rgba(2,8,23,.05);
}
.navbar .navbar-brand{
  font-weight: 800;
  letter-spacing: .2px;
}
.badge.cms-badge{
  background: rgba(249,115,22,.12);
  color: #9a3412;
  border: 1px solid rgba(249,115,22,.22);
}

.cms-shell{
  padding-top: 76px; /* fixed navbar space */
  padding-bottom: 48px;
}

.cms-page-title{
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
}

.cms-card{
  background: var(--cms-surface);
  border: 1px solid var(--cms-border);
  border-radius: 16px;
  box-shadow: var(--cms-shadow);
}

.cms-card .card-header{
  background: transparent;
  border-bottom: 1px solid var(--cms-border);
  font-weight: 700;
}

hr{border-color: var(--cms-border)}

/* Bootstrap primary -> orange */
.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--cms-accent);
  --bs-btn-border-color: rgba(249,115,22,.85);
  --bs-btn-hover-bg: var(--cms-accent-600);
  --bs-btn-hover-border-color: rgba(234,88,12,.9);
  --bs-btn-active-bg: #c2410c;
  --bs-btn-active-border-color: #c2410c;
  --bs-btn-focus-shadow-rgb: 249,115,22;
}

.btn, .btn-sm{
  border-radius: 12px;
  font-weight: 650;
}
.btn{ padding: .42rem .70rem; }
.btn-sm{ padding: .32rem .55rem; font-size: .875rem; }

.form-control, .form-select{
  background: #fff;
  border: 1px solid rgba(15,23,42,.16);
  color: var(--cms-text);
  border-radius: 12px;
}
.form-control::placeholder{color: rgba(51,65,85,.55)}
.form-control:focus, .form-select:focus{
  border-color: rgba(249,115,22,.65);
  box-shadow: 0 0 0 .2rem rgba(249,115,22,.16);
  color: var(--cms-text);
}
.form-label{color: rgba(15,23,42,.82); font-weight: 650; margin-bottom: .35rem}
.form-text, .text-muted{color: var(--cms-muted) !important}

.input-group > .form-control,
.input-group > .form-select{border-radius: 12px}

.table-responsive{
  border-radius: 16px;
  border: 1px solid var(--cms-border);
  background: var(--cms-surface);
  box-shadow: 0 8px 18px rgba(2,8,23,.04);
}
.table{
  margin: 0;
}
.table > :not(caption) > * > *{
  padding: .65rem .75rem;
  border-bottom-color: rgba(15,23,42,.10);
}
.table thead th{
  font-size: .86rem;
  text-transform: none;
  letter-spacing: .1px;
  color: rgba(15,23,42,.78);
  background: var(--cms-surface-2);
}
.table-hover tbody tr:hover{
  background: rgba(249,115,22,.06);
}

.cms-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border-radius:999px;
  padding:.22rem .55rem;
  font-size:.82rem;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.82);
}
.cms-pill.ok{border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.08); color: #166534}
.cms-pill.bad{border-color: rgba(239,68,68,.22); background: rgba(239,68,68,.08); color: #991b1b}

/* Image + upload polish */
img.cms-thumb{
  max-width: 160px;
  max-height: 96px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--cms-border);
  background: #fff;
}
.cms-content form img,
.cms-content table img{
  max-width: 220px;
  height: auto;
  border-radius: 12px;
}
@media (max-width: 576px){
  .cms-content form img,
  .cms-content table img{
    max-width: 160px;
  }
}

/* Mobile-first table -> cards (data-label required; app.js injects it) */
@media (max-width: 576px){
  .table-mobile thead{display:none}
  .table-mobile, .table-mobile tbody, .table-mobile tr, .table-mobile td{display:block; width:100%}
  .table-mobile tr{
    background: var(--cms-surface);
    border: 1px solid var(--cms-border);
    border-radius: 16px;
    padding: .35rem .55rem;
    margin: .55rem .5rem;
    box-shadow: 0 8px 18px rgba(2,8,23,.05);
  }
  .table-mobile td{
    border: none !important;
    padding: .38rem .25rem;
    display:flex;
    gap:.75rem;
    justify-content: space-between;
  }
  .table-mobile td::before{
    content: attr(data-label);
    font-weight: 700;
    color: rgba(15,23,42,.70);
    max-width: 48%;
  }
  .table-mobile td > *{max-width: 52%; text-align:right}
}

/* Spacing helpers */
.cms-content .card{ border-radius: 16px; border:1px solid var(--cms-border); box-shadow: 0 10px 26px rgba(2,8,23,.06) }
.cms-content .card-header{ background: var(--cms-surface-2) }
.cms-content .container, .cms-content .container-fluid{max-width: 1160px}