/* ==========================================================================
   Atlas Works — Admin Panel Stylesheet
   Builds on the public design tokens in style.css. Provides every class
   the admin PHP templates reference (none of them were defined before).
   ========================================================================== */

/* ----- Page shell ----- */
.admin-body{
  background:linear-gradient(180deg,#eef2fb 0%,var(--bg) 380px);
  min-height:100vh;
}
.admin-shell{display:flex;flex-direction:column;min-height:100vh}
.admin-main{flex:1;padding:0 0 64px}

/* Fix: img{display:block} in style.css overrides the [hidden] attribute,
   leaving alt text visible in image previews. */
.admin-body [hidden]{display:none !important}

/* ----- Top bar ----- */
.admin-topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.admin-topbar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:68px;padding:12px 0;flex-wrap:wrap;
}
.admin-topbar .brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.admin-topbar .brand-mark{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.admin-topbar .brand-mark span{color:var(--accent)}
.admin-topbar .brand-sub{font-size:.74rem;color:var(--muted);font-weight:500;margin-left:8px}

.admin-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.admin-nav a{
  display:inline-flex;align-items:center;
  padding:.5rem .85rem;border-radius:8px;
  font-size:.9rem;font-weight:500;color:var(--slate);
  transition:color .15s,background .15s;
}
.admin-nav a:hover{color:var(--ink);background:var(--bg-2);text-decoration:none}
.admin-nav a.is-active{color:var(--accent);background:var(--accent-wash);font-weight:600}

.admin-topbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.admin-user{
  font-size:.84rem;color:var(--muted);font-weight:500;
  padding:.4rem .7rem;border-radius:8px;background:var(--bg-2);
  display:inline-flex;align-items:center;gap:6px;
}
.admin-user::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);
}

/* ----- Section + headings inside the panel ----- */
.admin-main .section{padding:40px 0 0}
.admin-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;
  align-items:end;margin-bottom:28px;
}
.admin-head h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.2;letter-spacing:-.02em;
  color:var(--ink);margin:0;
}
.admin-hero-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}

/* ----- Flash / inline messages ----- */
.flash-message{
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:8px 14px;
  padding:14px 18px;border-radius:var(--radius);margin-bottom:20px;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-1);
  font-size:.92rem;line-height:1.5;
}
.flash-message::before{
  content:"";width:6px;align-self:stretch;border-radius:6px;
  background:var(--accent);
}
.flash-message strong{font-weight:700;color:var(--ink);grid-column:2}
.flash-message span{color:var(--slate);grid-column:2}
.flash-message.success{background:#f0fdf4;border-color:#bbf7d0}
.flash-message.success::before{background:#16a34a}
.flash-message.success strong{color:#15803d}
.flash-message.error{background:#fef2f2;border-color:#fecaca}
.flash-message.error::before{background:#dc2626}
.flash-message.error strong{color:#b91c1c}

/* ----- Auth (login + setup) ----- */
.admin-auth-section{padding:48px 0 64px}
.admin-auth-wrap{display:flex;justify-content:center}
.admin-auth-card{
  width:100%;max-width:480px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);padding:40px 36px;
}
.admin-auth-card h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,2.4vw,1.85rem);line-height:1.2;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 12px;
}
.admin-auth-card .section-intro{margin-bottom:24px}
@media (max-width:560px){.admin-auth-card{padding:28px 22px}}

.admin-form{display:grid;gap:16px}
.admin-form-actions{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.admin-form-actions .btn{width:100%}

/* ----- Dashboard ----- */
.admin-dashboard-section{padding:48px 0 0}
.admin-dashboard-wrap{display:grid;gap:28px}

.admin-stat-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.admin-stat-card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;display:grid;gap:6px;box-shadow:var(--shadow-1);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.admin-stat-card::after{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  opacity:.7;
}
.admin-stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);border-color:var(--accent-line)}
.admin-stat-label{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:600;
}
.admin-stat-card strong{
  font-family:var(--display);font-weight:700;font-size:2rem;line-height:1;
  color:var(--ink);letter-spacing:-.02em;
}
.admin-stat-card span:last-child{font-size:.86rem;color:var(--slate)}

/* ----- Panels (blog list, project list, editor) ----- */
.admin-panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);overflow:hidden;
}
.admin-panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px;border-bottom:1px solid var(--line);
}
.admin-panel-head h2{
  font-family:var(--display);font-weight:700;font-size:1.15rem;
  color:var(--ink);margin:0 0 4px;letter-spacing:-.01em;
}
.admin-panel-head p{color:var(--muted);font-size:.88rem;margin:0}

/* ----- Tables ----- */
.admin-table-wrap{overflow-x:auto}
.admin-table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:.92rem;
}
.admin-table th,.admin-table td{
  padding:14px 24px;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line-2);
}
.admin-table tbody tr:last-child td{border-bottom:none}
.admin-table th{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;background:var(--bg-2);
  border-bottom:1px solid var(--line);
}
.admin-table tbody tr{transition:background .12s}
.admin-table tbody tr:hover{background:var(--bg-2)}

.table-title-cell{display:flex;flex-direction:column;gap:2px;min-width:200px}
.table-title-cell strong{color:var(--ink);font-weight:600;font-size:.95rem;line-height:1.3}
.table-title-cell span{color:var(--muted);font-size:.78rem;font-family:ui-monospace,Menlo,Consolas,monospace}

.table-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.table-actions form{margin:0;display:inline}

/* Empty state inside panel */
.admin-panel .content-empty,
.admin-empty-state{
  margin:0;padding:36px 24px;border:none;border-radius:0;
  background:var(--card);text-align:center;justify-items:center;
}
.admin-empty-state h3{
  font-family:var(--display);font-weight:600;font-size:1.05rem;
  color:var(--ink);margin:0 0 6px;
}
.admin-empty-state p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0;max-width:46ch}

/* ----- Status badges ----- */
.status-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  border:1px solid transparent;line-height:1.4;
}
.status-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.status-badge.ok{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}
.status-badge.muted{background:var(--bg-2);color:var(--slate);border-color:var(--line)}
.status-badge.accent{background:var(--accent-wash);color:var(--accent-dark);border-color:var(--accent-line)}

/* ----- Button variants used only in admin ----- */
.btn-small{padding:.45rem .8rem;font-size:.82rem;border-radius:8px;font-weight:600}
.btn-danger{
  background:#fff;color:#b91c1c;border:1.5px solid #fecaca;box-shadow:var(--shadow-1);
}
.btn-danger:hover{border-color:#dc2626;color:#dc2626;background:#fef2f2}
.btn-small.btn-danger{font-weight:600}

/* ----- Editor pages (blog/project) ----- */
.admin-editor-section{padding:40px 0 0}
.admin-editor-wrap{display:grid;gap:24px}

.admin-form-panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);padding:32px;display:grid;gap:20px;
}
@media (max-width:640px){.admin-form-panel{padding:22px;gap:16px}}

.form-grid{display:grid;gap:18px}
.form-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.form-grid-two{grid-template-columns:1fr}}

/* All inputs/selects/textareas — admin uses the public .field, but we want
   to make sure native file inputs and selects look polished too. */
.admin-form-panel .field input[type="text"],
.admin-form-panel .field input[type="url"],
.admin-form-panel .field input[type="password"],
.admin-form-panel .field input[type="email"],
.admin-form-panel .field textarea,
.admin-form-panel .field select,
.admin-auth-card .field input,
.admin-auth-card .field textarea{
  width:100%;padding:.72rem .9rem;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
  transition:border-color .15s,box-shadow .15s,background .15s;
  font-size:.95rem;font-family:var(--body);
}
.admin-form-panel .field input:focus,
.admin-form-panel .field textarea:focus,
.admin-form-panel .field select:focus,
.admin-auth-card .field input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.admin-form-panel .field label,
.admin-auth-card .field label{
  font-weight:600;font-size:.85rem;color:var(--ink);margin-bottom:4px;display:block;
}

.short-textarea{min-height:90px;resize:vertical}

.select-field{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:38px !important;cursor:pointer;
}

.file-field-input{
  width:100%;padding:.55rem .65rem;
  border:1.5px dashed var(--line);border-radius:10px;background:var(--bg-2);
  font-size:.9rem;color:var(--slate);cursor:pointer;
  transition:border-color .15s,background .15s;
}
.file-field-input:hover{border-color:var(--accent-line);background:var(--accent-wash)}
.file-field-input::file-selector-button{
  margin-right:12px;padding:.4rem .85rem;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  font-weight:600;font-size:.85rem;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.file-field-input::file-selector-button:hover{border-color:var(--accent);color:var(--accent)}

.field-hint{font-size:.82rem;color:var(--muted);margin:6px 0 0;line-height:1.45}

.checkbox-field{justify-content:flex-end;gap:8px}
.checkbox-row{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-size:.92rem;color:var(--ink);font-weight:500;line-height:1.4;
}
.checkbox-row input[type="checkbox"]{
  width:18px;height:18px;border-radius:5px;accent-color:var(--accent);
  cursor:pointer;flex-shrink:0;
}
.feature-checkbox{
  padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--bg-2);transition:border-color .15s,background .15s;
}
.feature-checkbox:hover{border-color:var(--accent-line);background:var(--accent-wash)}
.feature-checkbox:has(input:checked){border-color:var(--accent);background:var(--accent-wash)}
.inline-checkbox{margin-top:8px}

/* Image preview */
.image-field{gap:10px}
.image-preview-wrap{
  display:none;
  border-radius:var(--radius);overflow:hidden;background:var(--bg-2);
  border:1px solid var(--line);
}
.image-preview-wrap.has-image{display:block}
.image-preview-wrap img{
  display:block;width:100%;max-height:340px;object-fit:cover;
}

/* ----- Rich text editor ----- */
.rich-editor{
  border:1.5px solid var(--line);border-radius:12px;background:#fff;
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
}
.rich-editor:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}

.rich-editor-toolbar{
  display:flex;flex-wrap:wrap;gap:2px;
  padding:8px;background:var(--bg-2);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:1;
}
.rich-editor-toolbar button{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:32px;padding:0 9px;
  border:1px solid transparent;border-radius:6px;background:transparent;
  font-size:.82rem;font-weight:600;color:var(--slate);cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.rich-editor-toolbar button:hover{background:#fff;color:var(--ink);border-color:var(--line)}
.rich-editor-toolbar button.is-active{background:var(--accent-wash);color:var(--accent);border-color:var(--accent-line)}
.rich-editor-toolbar button strong,
.rich-editor-toolbar button em,
.rich-editor-toolbar button u{font-style:inherit;font-weight:inherit}

.rich-editor-surface{
  min-height:280px;max-height:640px;overflow-y:auto;
  padding:18px 20px;color:var(--ink);font-size:.96rem;line-height:1.65;
  outline:none;
}
.rich-editor-surface:empty::before{
  content:"Start writing your post...";color:var(--muted);
}
.rich-editor-surface > * + *{margin-top:.85em}
.rich-editor-surface h2{font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.rich-editor-surface h3{font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--ink)}
.rich-editor-surface a{color:var(--accent);text-decoration:underline}
.rich-editor-surface blockquote{
  padding:8px 14px;border-left:3px solid var(--accent-line);
  color:var(--slate);font-style:italic;margin:0;
}
.rich-editor-surface img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.rich-editor-surface figure{margin:0;display:grid;gap:6px}
.rich-editor-surface figcaption{color:var(--muted);font-size:.85rem;text-align:center}
.rich-editor-surface ul,.rich-editor-surface ol{padding-left:1.4rem}
.rich-editor-surface code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--bg-2);padding:1px 6px;border-radius:4px;
}
.rich-editor-surface hr{border:none;border-top:1px solid var(--line);margin:1rem 0}

.rich-editor-source{
  width:100%;min-height:280px;padding:18px 20px;
  border:none;outline:none;background:#0f172a;color:#e2e8f0;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;line-height:1.6;
  resize:vertical;
}

.rich-editor-note{
  font-size:.8rem;color:var(--muted);margin:0;
  padding:10px 16px;border-top:1px solid var(--line-2);background:var(--bg-2);
}
.rich-editor-status{
  font-size:.82rem;font-weight:500;min-height:0;
  padding:0 16px;color:var(--muted);
}
.rich-editor-status:not(:empty){padding:8px 16px;border-top:1px solid var(--line-2);min-height:1.2em}
.rich-editor-status.ok{color:#16a34a;background:#f0fdf4}
.rich-editor-status.bad{color:#dc2626;background:#fef2f2}

/* ----- Sticky save bar at the bottom of editor forms ----- */
.sticky-actions{
  position:sticky;bottom:16px;z-index:5;
  display:flex;flex-direction:column;gap:10px;margin-top:8px;
  padding:14px 18px;border-radius:14px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);box-shadow:var(--shadow-2);
}
@media (min-width:560px){
  .sticky-actions{flex-direction:row;justify-content:flex-end;align-items:center}
  .sticky-actions .btn{width:auto}
}

/* Loading state on submit */
.btn.is-loading{position:relative;color:transparent !important;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);border-top-color:#fff;
  animation:btn-spin .7s linear infinite;
}
.btn-secondary.is-loading::after{border-color:rgba(15,23,42,.25);border-top-color:var(--ink)}
@keyframes btn-spin{to{transform:rotate(360deg)}}

/* ----- Responsive ----- */
@media (max-width:980px){
  .admin-stat-grid{grid-template-columns:1fr 1fr}
  .admin-head{grid-template-columns:1fr;align-items:start}
  .admin-hero-actions{justify-content:flex-start}
}
@media (max-width:720px){
  .admin-topbar-inner{min-height:auto;padding:10px 0;gap:10px}
  .admin-topbar-actions{gap:8px}
  .admin-user{display:none}
  .admin-nav{order:3;width:100%;border-top:1px solid var(--line);padding-top:8px;justify-content:flex-start;overflow-x:auto}
  .admin-nav a{flex-shrink:0;font-size:.85rem;padding:.4rem .7rem}
  .admin-stat-grid{grid-template-columns:1fr}
  .admin-panel-head{flex-direction:column;align-items:stretch;gap:12px;padding:18px 18px}
  .admin-panel-head .btn{align-self:flex-start}
  .admin-table th,.admin-table td{padding:12px 16px}
  .table-actions .btn{padding:.4rem .65rem}
}
@media (max-width:560px){
  .admin-topbar .brand-sub{display:none}
  .table-title-cell{min-width:140px}
}