/* ==========================================
   Michaela Peter – Admin Panel
   Brand: #004953 teal · Marcellus + Roboto
   ========================================== */

@font-face {
  font-family: 'MichaelaPeter';
  src: url('/assets/font/MichaelaPeter-Font.woff2') format('woff2'),
       url('/assets/font/MichaelaPeter-Font.woff')  format('woff');
  font-weight: normal;
  font-style:  normal;
  font-display: swap;
}

:root {
  --adm-sidebar:  240px;
  --adm-accent:   #004953;
  --adm-dark:     #002B32;
  --adm-bg:       #F0F5F5;
  --adm-surface:  #FFFFFF;
  --adm-border:   #D5E2E2;
  --adm-text:     #393939;
  --adm-muted:    #6E7C7C;
  --adm-danger:   #C0392B;
  --adm-success:  #27AE60;
  --adm-r:        8px;
  --adm-r-pill:   100px;
  --adm-sh:       0 2px 16px rgba(0,73,83,.10);
  --font:         'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-brand:   'MichaelaPeter', cursive;
  --font-h:       'Marcellus', Georgia, serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font); background:var(--adm-bg); color:var(--adm-text); line-height:1.6; font-size:14px; }
a    { color:var(--adm-accent); text-decoration:none; }
a:hover { text-decoration:underline; }
img  { display:block; max-width:100%; }
button { cursor:pointer; border:none; background:none; font:inherit; }
ul   { list-style:none; }

/* ── Login page ── */
.admin-login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--adm-accent);
}
.login-wrapper {
  width: 100%;
  max-width: 440px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}
.login-logo-area {
  text-align: center;
}
.login-logo-brand {
  font-family: var(--font-brand);
  font-size: 3.5rem;
  font-weight: normal;
  color: #fff;
  line-height: 1;
  display: block;
}
.login-logo-area svg {
  width: 260px;
  height: auto;
  display: block;
  margin: 0 auto;
  color: #fff;
}
.login-logo-tagline {
  font-family: var(--font);
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: .5rem;
}
.login-logo-tagline::before,
.login-logo-tagline::after {
  content: '';
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: rgba(255,255,255,.35);
}
.login-box {
  width: 100%;
  background: var(--adm-surface);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 60px rgba(0,43,50,.25);
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.login-form .form-group label {
  font-size: .85rem;
  font-weight: 400;
  color: var(--adm-text);
  letter-spacing: 0;
  text-transform: none;
}
.login-form input {
  width: 100%;
  padding: .85rem 1.25rem;
  border: 1.5px solid var(--adm-border);
  border-radius: var(--adm-r-pill);
  font: inherit;
  font-size: .95rem;
  background: #F5F7F7;
  color: var(--adm-text);
  transition: border-color .2s;
}
.login-form input:focus { outline:none; border-color:var(--adm-accent); background:#fff; }

.login-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .875rem;
}
.login-remember-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--adm-muted);
  cursor: pointer;
}
.login-remember-label input[type=checkbox] {
  width: 18px; height: 18px;
  border-radius: 4px;
  cursor: pointer;
  accent-color: var(--adm-accent);
}

.btn-login {
  width: 100%;
  padding: 1rem;
  background: var(--adm-dark);
  color: #fff;
  border: none;
  border-radius: var(--adm-r-pill);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s;
  letter-spacing: .02em;
}
.btn-login:hover { background: var(--adm-accent); }

.login-links {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.login-links a {
  font-size: .85rem;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .2s;
}
.login-links a:hover { color: #fff; text-decoration: none; }

.flash-login {
  background: rgba(192,57,43,.15);
  border: 1px solid rgba(192,57,43,.4);
  color: #ffb3ae;
  padding: .85rem 1.25rem;
  border-radius: var(--adm-r);
  font-size: .875rem;
  text-align: center;
}

/* ── Admin Layout ── */
.admin-layout { display:flex; min-height:100vh; }

.admin-sidebar {
  width: var(--adm-sidebar);
  background: var(--adm-dark);
  display: flex;
  flex-direction: column;
  position: fixed;
  top:0; left:0; bottom:0;
  z-index: 100;
  transition: transform .25s ease;
}
.sidebar-header {
  display: flex; align-items:center; justify-content:space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-logo {
  font-family: var(--font-brand);
  font-size: 1.6rem;
  font-weight: normal;
  color: #fff;
  line-height: 1;
}
.sidebar-logo-link {
  display: block;
  text-decoration: none;
}
.sidebar-logo-link svg {
  width: 160px;
  height: auto;
  display: block;
  color: #fff;
}
.sidebar-close { color:rgba(255,255,255,.5); font-size:1.4rem; display:none; }

.sidebar-nav { flex:1; padding:1.25rem 0; overflow-y:auto; }
.sidebar-nav ul { display:flex; flex-direction:column; gap:2px; }
.sidebar-nav a {
  display: flex; align-items:center; gap:.75rem;
  padding: .65rem 1.5rem;
  font-size: .82rem; font-weight:500;
  color: rgba(255,255,255,.55);
  transition: all .2s ease;
  border-left: 2px solid transparent;
}
.sidebar-nav a:hover { color:#fff; background:rgba(255,255,255,.05); text-decoration:none; }
.sidebar-nav a.active { color:#fff; border-left-color:rgba(255,255,255,.6); background:rgba(255,255,255,.08); }

.badge {
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: .68rem; font-weight:700;
  padding: .15rem .45rem;
  border-radius: 100px;
  margin-left: auto;
}

.sidebar-footer {
  display: flex; align-items:center; justify-content:space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-user   { font-size:.8rem; color:rgba(255,255,255,.45); }
.sidebar-logout { color:rgba(255,255,255,.35); transition:color .2s; }
.sidebar-logout:hover { color:rgba(255,100,100,.8); text-decoration:none; }

/* ── Main area ── */
.admin-main { flex:1; margin-left:var(--adm-sidebar); display:flex; flex-direction:column; }
.admin-topbar {
  display: flex; align-items:center; gap:1rem;
  padding: 0 1.5rem; height:56px;
  background: var(--adm-surface);
  border-bottom: 1px solid var(--adm-border);
  position: sticky; top:0; z-index:50;
  box-shadow: 0 1px 0 var(--adm-border);
}
.sidebar-toggle { padding:.4rem; color:var(--adm-muted); display:none; }
.topbar-title   { flex:1; font-size:.9rem; font-weight:500; color:var(--adm-muted); }
.topbar-view-site {
  display: flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--adm-muted);
  padding:.4rem .85rem;
  border:1px solid var(--adm-border); border-radius:var(--adm-r-pill);
  text-decoration:none; transition:all .2s;
}
.topbar-view-site:hover { border-color:var(--adm-accent); color:var(--adm-accent); text-decoration:none; }

.admin-content  { flex:1; padding:2rem 1.5rem; }
.admin-section  { max-width:1100px; }

/* ── Flash messages ── */
.flash { padding:.85rem 1.25rem; border-radius:var(--adm-r); margin-bottom:1.25rem; font-weight:500; font-size:.875rem; }
.flash-success { background:#edf7f4; border:1px solid var(--adm-success); color:#1a7045; }
.flash-error   { background:#fdf2f0; border:1px solid var(--adm-danger); color:var(--adm-danger); }

/* ── Headings ── */
.admin-page-title { font-family:var(--font-h); font-size:1.5rem; font-weight:400; color:var(--adm-dark); }
.admin-section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem; }

/* ── Cards ── */
.admin-card { background:var(--adm-surface); border-radius:var(--adm-r); box-shadow:var(--adm-sh); border:1px solid var(--adm-border); overflow:hidden; margin-bottom:1.5rem; }
.admin-card-header { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1.25rem; border-bottom:1px solid var(--adm-border); background:rgba(238,244,244,.5); }
.admin-card-header h2 { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--adm-muted); }
.admin-card > .empty-state { padding:2rem; }

/* ── Tables ── */
.table-wrap { overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.admin-table th { padding:.65rem 1rem; text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--adm-muted); background:rgba(238,244,244,.6); border-bottom:2px solid var(--adm-border); white-space:nowrap; }
.admin-table td { padding:.75rem 1rem; border-bottom:1px solid var(--adm-border); color:var(--adm-text); vertical-align:middle; }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:rgba(238,244,244,.5); }
.row-inactive td { opacity:.55; }
.row-child td  { background:rgba(238,244,244,.25); }
.child-indent  { color:var(--adm-muted); margin-right:.4rem; }
.row-date-header td { background:rgba(238,244,244,.6); font-size:.78rem; padding:.4rem 1rem; }
.row-notes td  { background:rgba(238,244,244,.3); font-size:.85rem; padding:.4rem 1rem; }
.row-full td   { background:rgba(192,57,43,.04); }
.notes-cell em { color:var(--adm-muted); font-size:.82rem; }
code { font-size:.8rem; background:var(--adm-bg); padding:.1rem .3rem; border-radius:3px; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem 1.25rem; border-radius:var(--adm-r-pill); font-family:var(--font); font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; transition:all .2s ease; white-space:nowrap; text-decoration:none; cursor:pointer; border:none; }
.btn-gold     { background:var(--adm-accent); color:#fff; }
.btn-gold:hover { background:var(--adm-dark); text-decoration:none; color:#fff; }
.btn-outline  { border:1.5px solid var(--adm-border); color:var(--adm-muted); background:transparent; }
.btn-outline:hover { border-color:var(--adm-accent); color:var(--adm-accent); text-decoration:none; }
.btn-danger   { background:var(--adm-danger); color:#fff; }
.btn-danger:hover { background:#a93226; text-decoration:none; color:#fff; }
.btn-sm { padding:.3rem .8rem; font-size:.72rem; }
.btn-full { width:100%; justify-content:center; }
.btn-large { padding:.75rem 1.75rem; font-size:.875rem; }

/* Toggle */
.toggle-btn { display:inline-flex; align-items:center; padding:.25rem .7rem; border-radius:100px; font-size:.72rem; font-weight:700; background:var(--adm-bg); color:var(--adm-muted); border:1px solid var(--adm-border); cursor:pointer; transition:all .2s; }
.toggle-btn.active { background:rgba(39,174,96,.1); color:var(--adm-success); border-color:rgba(39,174,96,.3); }
.toggle-btn:hover  { border-color:var(--adm-accent); }

/* Action buttons */
.actions-cell { display:flex; gap:.4rem; align-items:center; }
.action-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--adm-r); color:var(--adm-muted); transition:all .2s; background:transparent; }
.action-btn:hover { background:var(--adm-bg); color:var(--adm-accent); text-decoration:none; }
.action-btn-danger:hover { color:var(--adm-danger); }

.badge-template { font-size:.7rem; padding:.15rem .5rem; border-radius:3px; background:var(--adm-bg); color:var(--adm-muted); font-weight:600; }

.status-badge { display:inline-block; font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:100px; text-transform:uppercase; letter-spacing:.04em; }
.status-confirmed { background:rgba(39,174,96,.1); color:var(--adm-success); }
.status-cancelled { background:rgba(192,57,43,.1); color:var(--adm-danger); }
.status-draft     { background:rgba(110,124,124,.1); color:var(--adm-muted); }

/* ── Forms ── */
.admin-form { display:flex; flex-direction:column; gap:1.25rem; padding:1.5rem; }
.inline-form { padding:1.25rem; }
.form-group  { display:flex; flex-direction:column; gap:.3rem; }
.form-group label  { font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--adm-muted); }
.form-group input,
.form-group textarea,
.form-group select { padding:.6rem .9rem; border:1.5px solid var(--adm-border); border-radius:var(--adm-r); font:inherit; font-size:.875rem; color:var(--adm-text); background:var(--adm-surface); transition:border-color .2s; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline:none; border-color:var(--adm-accent); }
.form-group small { font-size:.72rem; color:var(--adm-muted); }
.form-group .input-inline { width:auto; display:inline; padding:.3rem .6rem; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
.form-row    { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; }
.flex-1 { flex:1; } .flex-2 { flex:2; } .flex-3 { flex:3; }
.form-group-action { flex-shrink:0; }
.form-checkboxes { display:flex; gap:1.5rem; flex-wrap:wrap; }
.checkbox-label { display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; cursor:pointer; }
.checkbox-label input { width:16px; height:16px; cursor:pointer; accent-color:var(--adm-accent); }
.form-section-divider { border-top:1px solid var(--adm-border); padding-top:1.25rem; margin-top:.25rem; }
.form-section-divider h3 { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--adm-muted); }
.form-actions { display:flex; gap:1rem; padding-top:.5rem; }
.char-count { font-size:.72rem; }
.required { color:var(--adm-accent); }

.slug-input-wrap { display:flex; align-items:center; border:1.5px solid var(--adm-border); border-radius:var(--adm-r); overflow:hidden; }
.slug-prefix { padding:.6rem .9rem; background:var(--adm-bg); color:var(--adm-muted); font-weight:600; font-size:.875rem; border-right:1px solid var(--adm-border); }
.slug-input-wrap input { border:none; border-radius:0; flex:1; }
.slug-input-wrap input:focus { box-shadow:none; outline:none; }

/* ── Stats ── */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:var(--adm-surface); border-radius:var(--adm-r); box-shadow:var(--adm-sh); padding:1.25rem; display:flex; align-items:center; gap:1rem; position:relative; overflow:hidden; border:1px solid var(--adm-border); }
.stat-icon { width:44px; height:44px; border-radius:var(--adm-r); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-icon-messages  { background:rgba(0,73,83,.1); color:var(--adm-accent); }
.stat-icon-bookings  { background:rgba(0,73,83,.08); color:var(--adm-accent); }
.stat-icon-galleries { background:rgba(0,73,83,.12); color:var(--adm-accent); }
.stat-icon-blog      { background:rgba(39,174,96,.1); color:var(--adm-success); }
.stat-body  { flex:1; }
.stat-value { font-size:1.75rem; font-weight:700; line-height:1; color:var(--adm-dark); }
.stat-label { font-size:.78rem; color:var(--adm-muted); margin-top:.2rem; }
.stat-link  { position:absolute; top:1rem; right:1rem; font-size:.75rem; font-weight:700; color:var(--adm-accent); text-transform:uppercase; letter-spacing:.05em; }
.stat-link:hover { text-decoration:none; color:var(--adm-dark); }

.quick-links-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.quick-link { background:var(--adm-surface); border:1px solid var(--adm-border); border-radius:var(--adm-r); padding:1.25rem; display:flex; flex-direction:column; gap:.75rem; font-size:.875rem; font-weight:600; color:var(--adm-text); transition:all .2s; text-decoration:none; }
.quick-link:hover { border-color:var(--adm-accent); color:var(--adm-accent); transform:translateY(-2px); text-decoration:none; }

/* ── Photo grid ── */
.admin-photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; padding:1.25rem; }
.admin-photo-item { border:1px solid var(--adm-border); border-radius:var(--adm-r); overflow:hidden; background:var(--adm-bg); }
.admin-photo-img  { aspect-ratio:4/3; overflow:hidden; position:relative; }
.admin-photo-img img { width:100%; height:100%; object-fit:cover; }
.photo-cover-badge { position:absolute; top:.5rem; left:.5rem; background:var(--adm-accent); color:#fff; font-size:.65rem; font-weight:700; padding:.2rem .5rem; border-radius:3px; letter-spacing:.04em; text-transform:uppercase; }
.admin-photo-actions { padding:.6rem; }
.photo-alt-input { width:100%; padding:.35rem .5rem; border:1px solid var(--adm-border); border-radius:3px; font:inherit; font-size:.75rem; margin-bottom:.5rem; background:var(--adm-surface); }
.photo-alt-input:focus { outline:none; border-color:var(--adm-accent); }
.photo-btns { display:flex; gap:.4rem; justify-content:flex-end; }

/* ── Upload ── */
.upload-area { padding:1.25rem; }
.upload-drop-zone { border:2px dashed var(--adm-border); border-radius:var(--adm-r); padding:2rem; text-align:center; cursor:pointer; transition:all .2s; color:var(--adm-muted); }
.upload-drop-zone:hover, .upload-drop-zone.dragover { border-color:var(--adm-accent); background:rgba(0,73,83,.04); }
.upload-drop-zone svg { margin:0 auto 1rem; opacity:.4; }
.upload-link { color:var(--adm-accent); cursor:pointer; text-decoration:underline; }
.upload-progress { margin-top:1rem; }
.upload-progress-bar { height:4px; background:var(--adm-accent); border-radius:2px; width:0; transition:width .3s ease; }
.upload-status { font-size:.8rem; color:var(--adm-muted); margin-top:.5rem; }

.gallery-meta { padding:.75rem 1.25rem; border-top:1px solid var(--adm-border); display:flex; gap:1.5rem; align-items:center; background:rgba(238,244,244,.4); font-size:.85rem; color:var(--adm-muted); }

/* ── Filter bar ── */
.filter-bar { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.filter-btn { padding:.35rem .85rem; border-radius:100px; font-size:.75rem; font-weight:700; border:1px solid var(--adm-border); color:var(--adm-muted); transition:all .2s; }
.filter-btn:hover, .filter-btn.active { background:var(--adm-accent); color:#fff; border-color:var(--adm-accent); text-decoration:none; }

/* ── Messages ── */
.messages-list { padding:1rem; display:flex; flex-direction:column; gap:1px; }
.message-item { padding:1.25rem; border-radius:var(--adm-r); border:1px solid var(--adm-border); background:var(--adm-surface); }
.message-unread { border-left:3px solid var(--adm-accent); }
.message-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.5rem; }
.message-from   { display:flex; align-items:center; gap:.5rem; }
.message-time   { font-size:.75rem; color:var(--adm-muted); white-space:nowrap; }
.message-meta   { font-size:.8rem; color:var(--adm-muted); margin-bottom:.75rem; }
.message-body   { font-size:.9rem; color:var(--adm-text); line-height:1.7; margin-bottom:1rem; }
.message-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* ── Time checkboxes ── */
.time-checkboxes { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.75rem; }
.time-checkbox-label { display:flex; align-items:center; gap:.4rem; padding:.35rem .7rem; border:1px solid var(--adm-border); border-radius:var(--adm-r); cursor:pointer; font-size:.8rem; font-weight:600; transition:all .2s; }
.time-checkbox-label:hover { border-color:var(--adm-accent); }
.time-checkbox-label:has(input:checked) { background:var(--adm-accent); color:#fff; border-color:var(--adm-accent); }

.mini-progress { width:60px; height:4px; background:var(--adm-border); border-radius:2px; display:inline-block; margin-right:.5rem; vertical-align:middle; }
.mini-progress-bar { height:4px; background:var(--adm-accent); border-radius:2px; }

.text-muted  { color:var(--adm-muted); font-size:.85rem; }
.empty-state { text-align:center; color:var(--adm-muted); padding:2rem; font-size:.9rem; }
.page-title-cell { min-width:150px; }

/* ── Quill ── */
.ql-toolbar  { border-color:var(--adm-border) !important; }
.ql-container { border-color:var(--adm-border) !important; font-family:inherit; font-size:.9rem; }
.ql-editor { min-height:300px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .stats-grid { grid-template-columns:1fr 1fr; }
  .quick-links-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 768px) {
  .admin-sidebar { transform:translateX(-100%); }
  .admin-sidebar.open { transform:translateX(0); }
  .sidebar-close { display:block; }
  .sidebar-toggle { display:flex; }
  .admin-main { margin-left:0; }
  .form-grid-2, .form-grid-3 { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr; }
  .quick-links-grid { grid-template-columns:1fr 1fr; }
}