/*
 * CUTM Forge theme — mirrors the CUTM Cloud Console (frontend/src/theme.js).
 *
 *   Maroon  #8E1B23 / #6B1018  crest ring        → primary, header bar
 *   Gold    #C9A227            crest motto band  → header stripe, highlights
 *   Teal    #0F6E7E            peacock plumage   → info
 *   Ivory   #F7F4EE            parchment field   → page surface
 *
 * Builds on Forgejo's own light theme and only overrides tokens + chrome, so
 * Forgejo upgrades keep working. Light-only, like the console.
 */
@import "./theme-forgejo-light.css";

:root {
  --fonts-proportional: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --border-radius: 4px;

  /* ── primary: crest maroon ─────────────────────────────────── */
  --color-primary: #8E1B23;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #7D1820;
  --color-primary-dark-2: #6B1018;
  --color-primary-dark-3: #5E0E15;
  --color-primary-dark-4: #520C12;
  --color-primary-dark-5: #460A0F;
  --color-primary-dark-6: #3A080C;
  --color-primary-dark-7: #2E0609;
  --color-primary-light-1: #A3262F;
  --color-primary-light-2: #B8434B;
  --color-primary-light-3: #CC6D73;
  --color-primary-light-4: #DD9A9E;
  --color-primary-light-5: #EBC4C6;
  --color-primary-light-6: #F6E9EA;
  --color-primary-light-7: #FBF4F4;
  --color-primary-alpha-10: #8E1B2319;
  --color-primary-alpha-20: #8E1B2333;
  --color-primary-alpha-30: #8E1B234B;
  --color-primary-alpha-40: #8E1B2366;
  --color-primary-alpha-50: #8E1B2380;
  --color-primary-alpha-60: #8E1B2399;
  --color-primary-alpha-70: #8E1B23B3;
  --color-primary-alpha-80: #8E1B23CC;
  --color-primary-alpha-90: #8E1B23E1;
  --color-accent: #8E1B23;
  --color-small-accent: #EBC4C6;

  /* ── warm neutrals (borders, secondary buttons) ────────────── */
  --color-secondary: #E6DED2;
  --color-secondary-dark-1: #E0D6C8;
  --color-secondary-dark-2: #D8C9BC;
  --color-secondary-dark-3: #CDBCAD;
  --color-secondary-dark-4: #B49E8C;
  --color-secondary-dark-5: #A08A79;
  --color-secondary-dark-6: #8C7768;
  --color-secondary-dark-7: #7A6658;
  --color-secondary-dark-8: #6E5C5E;
  --color-secondary-dark-9: #5E4D4F;
  --color-secondary-dark-10: #4E3F41;
  --color-secondary-dark-11: #403234;
  --color-secondary-dark-12: #332628;
  --color-secondary-dark-13: #2A1519;
  --color-secondary-light-1: #EDE6DC;
  --color-secondary-light-2: #F5EDE1;
  --color-secondary-light-3: #FAF6F1;
  --color-secondary-light-4: #FDFBF8;
  --color-secondary-bg: #F5EDE1;

  /* ── surfaces ──────────────────────────────────────────────── */
  --color-body: #F7F4EE;
  --color-box-header: #F5EDE1;
  --color-box-body: #FFFFFF;
  --color-box-body-highlight: #FAF6F1;
  --color-card: #FFFFFF;
  --fancy-card-bg: #FFFFFF;
  --fancy-card-border: #E6DED2;
  --color-menu: #FFFFFF;
  --color-header-wrapper: #FBF8F3;
  --color-header-wrapper-transparent: #FBF8F300;
  --color-footer: #F7F4EE;
  --color-button: #F5EDE1;
  --color-hover: #FAF6F1;
  --color-active: #F6E9EA;
  --color-timeline: #E6DED2;
  --color-light-border: #E6DED2;
  --color-input-background: #FFFFFF;
  --color-input-border: #D8C9BC;
  --color-input-border-hover: #B49E8C;
  --color-input-text: #2A1519;
  --color-code-bg: #FFFFFF;
  --color-markup-code-block: #F5EDE1;
  --color-markup-code-inline: #EFE6D8;
  --color-editor-line-highlight: #FAF6F1;
  --color-expand-button: #EFE6D8;
  --color-diff-inactive: #F5EDE1;

  /* ── text ──────────────────────────────────────────────────── */
  --color-text-dark: #1C0D10;
  --color-text: #2A1519;
  --color-text-light: #4E3F41;
  --color-text-light-1: #5E4D4F;
  --color-text-light-2: #6E5C5E;
  --color-text-light-3: #857375;

  /* ── header bar (console TopBar) ───────────────────────────── */
  --color-nav-bg: #6B1018;
  --color-nav-hover-bg: rgba(255, 255, 255, 0.10);
  --color-secondary-nav-bg: #F7F4EE;

  /* ── accents + status (console colours) ────────────────────── */
  --color-gold: #C9A227;
  --color-teal: #0F6E7E;
  --color-highlight-fg: #C9A227;
  --color-highlight-bg: #FBF3DC;
  --color-selection-bg: #8E1B23;
  --color-selection-fg: #FFFFFF;
  --color-green: #1B7A4B;
  --color-red: #C62F22;
  --color-success-text: #14532D;
  --color-warning-text: #6B3F00;
  --color-info-bg: #E3F1F3;
  --color-info-border: #B5D9DF;
  --color-info-text: #0B4F5A;
  --color-reaction-active-bg: #8E1B2333;
  --color-reaction-hover-bg: #8E1B234B;
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D8C9BC; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #B49E8C; }

/* ── Header bar: maroon with the heraldic gold stripe ─────────── */
#navbar {
  background: #6B1018;
  border-bottom: 2px solid #C9A227;
  min-height: 50px;
}
#navbar > .navbar-left > .item,
#navbar > .navbar-right > .item,
#navbar > .navbar-left > .item svg,
#navbar > .navbar-right > .item svg,
#navbar .navbar-mobile-right > .item {
  color: #F7EFE4;
}
#navbar > .navbar-left > .item:hover,
#navbar > .navbar-right > .item:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
}
#navbar > .navbar-left > .item.active {
  background: rgba(201, 162, 39, 0.20);
  color: #FFFFFF;
  box-shadow: inset 0 -2px 0 #C9A227;
}
/* Dropdown menus hang off the bar but sit on white — keep their text dark. */
#navbar .menu .menu .item,
#navbar .dropdown .menu .item,
#navbar .dropdown .menu .item svg { color: var(--color-text); }
#navbar .notification_count { background: #C9A227 !important; color: #3D2A00 !important; }

/* Brand mark: crest on an ivory plate + wordmark + region chip (console BrandLogo). */
#navbar-logo { gap: 10px; padding-right: 14px !important; }
#navbar-logo img {
  width: auto; height: 30px;
  background: #FBF6EC;
  border: 1px solid #C9A227;
  border-radius: 5px;
  padding: 2px 4px;
  box-sizing: content-box;
}
#navbar-logo::after {
  content: "CUTM Forge";
  font-size: 14px; font-weight: 700; letter-spacing: -0.2px;
  color: #F7EFE4; white-space: nowrap;
}
#navbar-logo::before {
  content: "VZM DC";
  order: 3;
  font-size: 11px; line-height: 20px; padding: 0 8px;
  color: #F0D9AE;
  background: rgba(201, 162, 39, 0.20);
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 11px;
  white-space: nowrap;
}
@media (max-width: 767.98px) { #navbar-logo::before { display: none; } }

/* Primary buttons: console contained-primary. */
.ui.primary.button, .ui.primary.buttons .button {
  background: #8E1B23; color: #fff; font-weight: 600;
}
.ui.primary.button:hover, .ui.primary.buttons .button:hover { background: #6B1018; }

/* Table heads like the console's MUI tables. */
.ui.table > thead > tr > th {
  background: #F5EDE1; color: #6E5C5E;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}

/* ── Sign-in card: console "Sign in to Console" card ──────────── */
.page-content.user.signin .ui.top.attached.header,
.page-content.user.signup .ui.top.attached.header {
  background: #6B1018;
  color: #FFFFFF;
  border: 0;
  border-bottom: 3px solid #C9A227;
  text-align: left;
  font-size: 18px; font-weight: 700;
  padding: 18px 24px;
}
.page-content.user.signin .ui.top.attached.header::after {
  content: "CUTM Private Cloud · use your @cutmap.ac.in Google account";
  display: block;
  font-size: 12px; font-weight: 400; color: #DDB9A6; margin-top: 2px;
}
.page-content.user.signin .ui.attached.segment {
  background: #FFFFFF;
  border-color: #E6DED2;
  padding: 28px 24px;
  box-shadow: 0 1px 3px rgba(42, 21, 25, 0.07);
}
.page-content.user.signin .column { max-width: 460px !important; }
.oauth-login-link.ui.button {
  background: #FFFFFF; color: #2A1519;
  border: 1px solid #DADCE0; font-weight: 600;
}
.oauth-login-link.ui.button:hover { background: #FAF6F1; border-color: #B49E8C; }
.cutm-admin-signin { margin-top: 18px; font-size: 12px; color: #6E5C5E; }
.cutm-admin-signin > summary { cursor: pointer; text-align: center; list-style: none; }
.cutm-admin-signin > summary::-webkit-details-marker { display: none; }
.cutm-admin-signin[open] > summary { margin-bottom: 14px; }

/* ── Landing page ─────────────────────────────────────────────── */
.cutm-home { max-width: 980px; margin: 0 auto; padding: 40px 16px 56px; }
.cutm-hero {
  background: #FFFFFF;
  border: 1px solid #E6DED2;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(42, 21, 25, 0.07);
  overflow: hidden;
}
.cutm-hero-stripe { height: 6px; background: linear-gradient(90deg, #6B1018 0%, #8E1B23 60%, #C9A227 100%); }
.cutm-hero-body {
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px;
  padding: 32px;
}
.cutm-hero-body img { height: 110px; width: auto; max-width: 100%; }
.cutm-hero-text { flex: 1 1 320px; min-width: 0; }
.cutm-hero-text h1 { margin: 0 0 6px; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.01em; color: #2A1519; }
.cutm-hero-text p { margin: 0 0 18px; color: #6E5C5E; font-size: 15px; line-height: 1.55; }
.cutm-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cutm-btn-gold.ui.button { background: #C9A227; color: #3D2A00; font-weight: 700; }
.cutm-btn-gold.ui.button:hover { background: #A8861B; color: #2A1D00; }
.cutm-features {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px;
}
.cutm-feature {
  background: #FFFFFF; border: 1px solid #E6DED2; border-radius: 6px; padding: 18px;
}
.cutm-feature h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: #2A1519; }
.cutm-feature p { margin: 0; font-size: 13px; color: #6E5C5E; line-height: 1.55; }
.cutm-feature .cutm-eyebrow {
  display: block; margin-bottom: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #8A6D12;
}
@media (max-width: 760px) { .cutm-features { grid-template-columns: 1fr; } }

/* ── Footer: ownership line, as on the console ────────────────── */
.page-footer { border-top: 1px solid #E6DED2; color: #6E5C5E; font-size: 12px; }
.page-footer .cutm-copy strong { color: #2A1519; font-weight: 600; }