/*
  Havoc Console - themes and the modern look.

  styles.css is the classic look. This file adds, on top of it:
  1. the modern look ([data-look="modern"]): type, surfaces, focus rings, icons,
  2. the sidebar layout ([data-layout="sidebar"]) on wide screens.
  The themes' colours come from Havoc (/themes.css, app/core/themes.py).
*/

/* ---- Palettes ----------------------------------------------------------
   Every theme's colours and the personal appearance options come from
   Havoc itself: /themes.css (app/core/themes.py), loaded after this file. */

/* ---- Modern look ------------------------------------------------------- */

[data-look="modern"] {
  --font: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ring: color-mix(in srgb, var(--accent) 28%, transparent);
  --hairline: color-mix(in srgb, var(--border) 70%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

[data-look="modern"] body {
  font-family: var(--font);
  font-size: 14.5px;
  letter-spacing: -0.006em;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(1100px 520px at 100% -8%, var(--glow, transparent), transparent 70%),
    radial-gradient(900px 480px at -10% 110%, var(--glow, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
}

[data-look="modern"] h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; }
[data-look="modern"] h2 { font-weight: 650; letter-spacing: -0.01em; }
[data-look="modern"] ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
[data-look="modern"] .ico { display: inline-block; flex: none; }
[data-look="modern"] code { border-radius: 6px; border: 1px solid var(--hairline); }

[data-look="modern"] .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; letter-spacing: -0.02em; }
[data-look="modern"] .brand-mark,
[data-look="modern"] .brand-big .brand-mark {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 8px;
  color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 55%),
    linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}

[data-look="modern"] .topbar {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--hairline);
}
[data-look="modern"] .topbar nav a { display: inline-flex; align-items: center; gap: 8px; border-radius: 9px; font-weight: 500; transition: background 0.15s, color 0.15s; }
[data-look="modern"] .topbar nav a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
[data-look="modern"] .user .ghost { display: inline-flex; align-items: center; gap: 6px; }
[data-look="modern"] .user .ghost.active { color: var(--accent); }
/* In the top bar, icons are enough for settings and sign-out. */
[data-look="modern"] .topbar .user .ghost span { display: none; }
[data-look="modern"] .topbar .user .ghost { padding: 6px; border-radius: 9px; }
[data-look="modern"] .topbar .user .ghost:hover { background: var(--surface-2); }

[data-look="modern"] main { max-width: 1160px; padding: 32px 28px 64px; }
[data-look="modern"] .page-head { margin-bottom: 20px; }
[data-look="modern"] .section-title { font-size: 12px; font-weight: 650; letter-spacing: 0.08em; }

[data-look="modern"] .card { border-color: var(--hairline); box-shadow: var(--shadow); }
[data-look="modern"] .cert { border-top: 1px solid var(--hairline); position: relative; overflow: hidden; transition: box-shadow 0.15s, border-color 0.15s; }
[data-look="modern"] .cert::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); }
[data-look="modern"] .cert.revoked::before { background: var(--danger); }
[data-look="modern"] .cert.draft::before,
[data-look="modern"] .cert.in_review::before { background: var(--border); }
[data-look="modern"] .cert:hover { box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
[data-look="modern"] .detail { padding: 30px; }
[data-look="modern"] .tag { letter-spacing: 0.06em; font-weight: 650; }

[data-look="modern"] button,
[data-look="modern"] .button {
  min-height: 36px; border-radius: 10px; font-weight: 600; font-size: 13.5px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
[data-look="modern"] button:active,
[data-look="modern"] .button:active { transform: translateY(1px); }
/* Colour and sheen apart: the colour can fade on hover, the sheen stays - a gradient
   cannot be blended into a colour, the button would flash empty for a moment. */
[data-look="modern"] .primary {
  background-color: var(--accent);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  border-color: color-mix(in srgb, var(--accent) 80%, #000);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
[data-look="modern"] .primary:hover { background-color: var(--accent-hover); }
[data-look="modern"] .ghost,
[data-look="modern"] .small { box-shadow: none; }
[data-look="modern"] .small { min-height: 28px; border-radius: 8px; }

[data-look="modern"] input,
[data-look="modern"] select,
[data-look="modern"] textarea {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
[data-look="modern"] input[type="checkbox"],
[data-look="modern"] input[type="radio"] { box-shadow: none; accent-color: var(--accent); }
[data-look="modern"] input:focus,
[data-look="modern"] select:focus,
[data-look="modern"] textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
[data-look="modern"] button:focus-visible,
[data-look="modern"] a:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }

[data-look="modern"] .badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
}
[data-look="modern"] .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.85; }
[data-look="modern"] .form-error,
[data-look="modern"] .notice { border-radius: 12px; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }

[data-look="modern"] th { background: var(--surface-2); font-size: 11px; letter-spacing: 0.06em; }
[data-look="modern"] th,
[data-look="modern"] td { border-bottom-color: var(--hairline); }
[data-look="modern"] tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

[data-look="modern"] .toast { border-radius: 12px; box-shadow: var(--shadow-lg); }
[data-look="modern"] .loading { animation: havoc-fade 1.2s ease-in-out infinite alternate; }
@keyframes havoc-fade { from { opacity: 0.4; } to { opacity: 1; } }

/* Sign-in, registration and certificate check */
[data-look="modern"] .auth {
  position: relative; margin-top: 9vh; padding: 38px 36px 30px; border-radius: 22px; box-shadow: var(--shadow-lg);
  overflow: hidden;
}
[data-look="modern"] .auth::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #c084fc));
}
[data-look="modern"] body:has(.auth) {
  background:
    radial-gradient(720px 400px at 12% -6%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(620px 380px at 96% 104%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--bg);
}
[data-look="modern"] .auth .auth-secure { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 12.5px; }
[data-look="modern"] .auth .auth-secure svg { color: var(--ok, #1b7f4b); flex: none; }
[data-look="modern"] .auth .brand-big { display: flex; align-items: center; gap: 12px; letter-spacing: -0.03em; }
[data-look="modern"] .auth .brand-big .brand-mark { width: 36px; height: 36px; border-radius: 11px; font-size: 19px; }
[data-look="modern"] .verdict { border-top: 1px solid var(--hairline); }
.verify-result .verify-ribbon {
  display: inline-block; align-self: flex-start; margin: 4px 0; padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: #4a3508; background: linear-gradient(135deg, #f6e3a1, #d9b25a 55%, #f1d27a);
}
.verify-result .verify-ribbon.plain { color: var(--muted); background: var(--surface-2, #eef0f4); text-transform: none; letter-spacing: 0; font-weight: 600; }
.verify-result .verify-holder { margin: 8px 0 4px; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-style: italic; font-size: 28px; line-height: 1.15; color: var(--text); }
.verdict.expired { background: color-mix(in srgb, #a15c07 10%, var(--surface)); color: #a15c07; }

[data-look="modern"] .theme-card { transition: border-color 0.15s; }
[data-look="modern"] .theme-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

@media (prefers-reduced-motion: reduce) {
  [data-look="modern"] * { transition: none !important; animation: none !important; }
}

/* High contrast on top of the modern look */
[data-theme="contrast"] { --hairline: var(--border); --ring: var(--accent); }
[data-theme="contrast"] .card { border-width: 2px; }
[data-theme="contrast"] body { background: var(--bg); }

/* ---- Sidebar layout (wide screens, signed in) -------------------------- */

@media (min-width: 1024px) {
  [data-layout="sidebar"] body:has(> #topbar:not([hidden])) {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    align-items: start;
  }

  [data-layout="sidebar"] #topbar {
    position: sticky;
    top: 0;
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 18px 14px 14px;
    border-bottom: 0;
    border-right: 1px solid var(--hairline, var(--border));
    background: color-mix(in srgb, var(--surface) 78%, var(--bg));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow-y: auto;
  }

  [data-layout="sidebar"] #topbar .brand { padding: 2px 10px 12px; font-size: 18px; }
  [data-layout="sidebar"] #topbar .project-switch { max-width: none; width: 100%; margin-bottom: 8px; }
  [data-layout="sidebar"] #topbar nav { flex: 1; flex-direction: column; gap: 2px; }
  [data-layout="sidebar"] #topbar nav a { display: flex; align-items: center; gap: 11px; padding: 8px 11px; }
  [data-layout="sidebar"] #topbar nav .nav-section { display: block; padding: 14px 11px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  [data-layout="sidebar"] #topbar nav .nav-section:first-child { padding-top: 4px; }

  [data-layout="sidebar"] #topbar .user {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--hairline, var(--border));
  }
  [data-layout="sidebar"] #user-name { padding: 4px 10px 8px; font-size: 13px; }
  [data-layout="sidebar"] #topbar .user .ghost { justify-content: flex-start; padding: 7px 10px; }
  [data-layout="sidebar"] #topbar .user .ghost span { display: inline; }

  [data-layout="sidebar"] body:has(> #topbar:not([hidden])) main { width: 100%; padding: 36px 44px 64px; }
}

/* ---- Components added later, the same in every theme ---- */
.cli-card { margin-top: 20px; }
.cli-card h2 { margin-bottom: 6px; }
.cli-card pre {
  margin: 12px 0;
  padding: 10px 12px;
  overflow-x: auto;
  border-radius: 8px;
  background: var(--surface-2);
  font: 13px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* Console 2.0 elements in the modern look. */
[data-look="modern"] .tabs { border-bottom-color: var(--border); }
[data-look="modern"] .tabs a { border-radius: 8px 8px 0 0; font-weight: 500; }
[data-look="modern"] .tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
[data-look="modern"] .stat { border-radius: 14px; transition: border-color 0.15s, box-shadow 0.15s; }
[data-look="modern"] .stat:hover { box-shadow: var(--shadow-lg); }
[data-look="modern"] .more-actions .menu { border-radius: 12px; }

/* ---- Files (#/files, #/admin/storage) ------------------------------------ */

.usage { display: grid; gap: 4px; min-width: 200px; }
.usage-bar { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.usage-bar span { display: block; height: 100%; background: var(--accent); }
.usage-bar span.full { background: var(--danger); }
.files-table .file-thumb { width: 56px; color: var(--muted); }
.files-table .file-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; }
.files-table td.actions { white-space: normal; }
.files-table td.actions button { margin: 2px; }
.upload-form { margin-bottom: 16px; flex-wrap: wrap; }
.upload-form input[name="description"] { flex: 1 1 220px; }
.storage-settings { margin: 0 0 16px; }
.storage-settings > summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }
tr.selected td { background: var(--surface-2); }
.files-table td code { white-space: nowrap; }

/* ---- Themes (#/settings, #/admin/themes) ---------------------------------- */
.theme-chip { display: inline-flex; width: 44px; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.theme-chip span { flex: 1; }
.colour-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.colour-field { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.colour-field input[type="color"] { width: 38px; height: 30px; padding: 2px; border-radius: 8px; flex: none; }
.page-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 12px; }