/* MediaHub Cloud — DACOS Bordeaux Light (Forge-inspired)
   Single CSS file: assets/css/app.css
   ------------------------------------------------------------ */

:root{
  --dacos-bordeaux:#7A0F1A;
  --dacos-bordeaux-2:#5F0B14;
  --dacos-bordeaux-3:#9A1A27;
  --bg:#F6F7FB;
  --card:#FFFFFF;
  --text:#121826;
  --muted:#566074;
  --border:rgba(17,24,39,.10);
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --shadow-sm:0 6px 18px rgba(17,24,39,.07);
  --radius:18px;
  --radius-sm:14px;
}

html,body{height:100%}
body{
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Typography */
h1,h2,h3{letter-spacing:-0.02em}
.small-muted{color:var(--muted); font-size:.92rem}
.kpi{font-weight:800; font-size:1.35rem; letter-spacing:-.02em}

/* Links */
a{color:var(--dacos-bordeaux); text-decoration:none}
a:hover{color:var(--dacos-bordeaux-2)}

/* Layout */
.mh-shell{min-height:100vh; display:flex; flex-direction:column}
.mh-main{flex:1 1 auto; padding:1rem 0 2rem}
@media (min-width:992px){ .mh-main{padding:1.25rem 0 2.25rem} }

/* Topbar */
.mh-topbar{
  position:sticky; top:0; z-index:1030;
  backdrop-filter:saturate(160%) blur(10px);
  background: rgba(246,247,251,.78);
  border-bottom:1px solid var(--border);
}
.mh-brand{
  display:flex; align-items:center; gap:.6rem;
  font-weight:900; letter-spacing:-.03em;
}
.mh-brand-mark{
  width:36px; height:36px; border-radius:14px;
  background: radial-gradient(110% 110% at 30% 20%, var(--dacos-bordeaux-3) 0%, var(--dacos-bordeaux) 40%, #3a060c 100%);
  box-shadow: var(--shadow-sm);
}
.mh-pill{
  border:1px solid var(--border);
  background: rgba(255,255,255,.65);
  border-radius: 999px;
  padding:.35rem .6rem;
  font-size:.9rem;
}

/* Cards */
.mh-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.mh-card .mh-card-hd{
  padding:1rem 1rem .75rem;
  border-bottom:1px solid var(--border);
}
.mh-card .mh-card-bd{padding:1rem}
@media (min-width:992px){
  .mh-card .mh-card-hd{padding:1.1rem 1.1rem .8rem}
  .mh-card .mh-card-bd{padding:1.1rem}
}

/* Buttons */
.btn-dacos{
  --bs-btn-bg: var(--dacos-bordeaux);
  --bs-btn-border-color: var(--dacos-bordeaux);
  --bs-btn-hover-bg: var(--dacos-bordeaux-2);
  --bs-btn-hover-border-color: var(--dacos-bordeaux-2);
  --bs-btn-active-bg: var(--dacos-bordeaux-2);
  --bs-btn-active-border-color: var(--dacos-bordeaux-2);
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#fff;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(122,15,26,.16);
}
.btn-soft{
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.85);
}
.btn-soft:hover{border-color: rgba(122,15,26,.22)}

/* Form */
.form-control,.form-select{
  border-radius: 14px;
  border-color: rgba(17,24,39,.14);
}
.form-control:focus,.form-select:focus{
  border-color: rgba(122,15,26,.35);
  box-shadow: 0 0 0 .2rem rgba(122,15,26,.12);
}

/* Tables (mobile friendly) */
.table{
  --bs-table-bg:transparent;
}
.table thead th{
  font-size:.85rem; color:var(--muted);
  border-bottom:1px solid var(--border) !important;
}
.table td, .table th{vertical-align:middle}
.table tbody tr{
  border-bottom:1px solid rgba(17,24,39,.07);
}
.table tbody tr:hover{
  background: rgba(122,15,26,.03);
}

/* Badges */
.badge-soft{
  background: rgba(122,15,26,.10);
  color: var(--dacos-bordeaux-2);
  border:1px solid rgba(122,15,26,.18);
  border-radius: 999px;
  padding:.35rem .55rem;
  font-weight:700;
}

/* Toast/alerts */
.mh-alert{
  border-radius: 16px;
  border:1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.mh-alert.success{border-color: rgba(16,185,129,.25)}
.mh-alert.danger{border-color: rgba(239,68,68,.25)}

/* Utility */
.mh-divider{height:1px; background:var(--border); margin:1rem 0}
.mh-footer{padding:1rem 0 1.75rem; color:var(--muted); font-size:.9rem}
.mh-kpi-grid{display:grid; gap:.85rem; grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:992px){ .mh-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.mh-kpi{
  padding:.9rem; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(246,247,251,1) 100%);
  border:1px solid var(--border);
}

/* Login */
.mh-login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.25rem;
}
.mh-login-card{
  width:100%; max-width: 980px;
  overflow:hidden;
  border-radius: 24px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  background: #fff;
}
.mh-login-left{
  padding:1.25rem;
  background: radial-gradient(120% 110% at 30% 20%, rgba(154,26,39,.16) 0%, rgba(122,15,26,.08) 45%, rgba(246,247,251,1) 100%);
}
.mh-login-right{padding:1.25rem}
@media (min-width:992px){
  .mh-login-left{padding:2rem}
  .mh-login-right{padding:2rem}
}
.mh-big-title{font-size:1.7rem; font-weight:900; letter-spacing:-.04em}
@media (min-width:992px){ .mh-big-title{font-size:2.15rem} }

/* Nav */
.mh-nav .nav-link{
  border-radius: 14px;
  color: var(--muted);
  font-weight:700;
  padding:.6rem .85rem;
}
.mh-nav .nav-link.active{
  color: var(--dacos-bordeaux);
  background: rgba(122,15,26,.08);
  border: 1px solid rgba(122,15,26,.18);
}
.mh-nav .nav-link:hover{
  color: var(--dacos-bordeaux-2);
  background: rgba(122,15,26,.05);
}

/* Code / token */
.mh-mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.mh-token{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius: 12px;
  background: rgba(17,24,39,.04);
  border:1px solid var(--border);
  font-size:.9rem;
}

/* Responsive action bar */
.mh-actions{
  display:flex; flex-wrap:wrap; gap:.5rem;
}

.btn-outline-danger{border-radius:14px}