/* app/static/theme.css — C2 PBX Block Manager theme (dark, C2 cobalt-blue).
   The whole brand lives here as CSS custom properties: edit :root to rebrand.
   No external CSS framework and no url imports — fully self-contained. */

:root {
  /* ---- C2 PBX palette (dark theme, matches the C2 logo + c2techsys.com) ---- */
  --brand-bg:        #0a0c10;   /* near-black page, like the logo circle */
  --brand-bg-2:      #0e1117;
  --brand-surface:   #141926;   /* cards / panels */
  --brand-surface-2: #1b2233;   /* raised surfaces, table head, inputs */
  --brand-text:      #e9edf4;   /* primary text */
  --brand-muted:     #97a3b6;   /* secondary text */
  --brand-border:    #28324a;   /* hairlines */
  --brand-primary:   #3b7ddd;   /* C2 cobalt blue */
  --brand-primary-2: #2a5fb0;   /* primary hover / pressed */
  --brand-accent:    #5b9bff;   /* light accent blue */
  --brand-danger:    #ef4d56;
  --brand-success:   #2fbf86;
  --brand-warning:   #e3a93b;
  --brand-on-primary:#ffffff;

  --space:   1rem;
  --radius:  10px;
  --maxw:    1080px;
  --shadow:  0 1px 2px rgba(0,0,0,.4), 0 6px 24px rgba(0,0,0,.35);
  --ring:    0 0 0 3px rgba(59,125,221,.35);
  --font:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--brand-text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(59,125,221,.10), transparent 60%),
    var(--brand-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; margin: 0 0 var(--space); letter-spacing: .2px; }
h2 { font-size: 1.15rem; margin: 1.25rem 0 .5rem; }

/* ----------------------------------------------------------- header / nav -- */
.app-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space);
  padding: .6rem clamp(.75rem, 3vw, 1.5rem);
  background: rgba(10,12,16,.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--brand-border);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--brand-text); }
.brand:hover { text-decoration: none; }
.brand-logo { height: 34px; width: 34px; display: block; }
.brand-logo-fallback { font-size: 1.1rem; font-weight: 800; letter-spacing: .3px; }
.brand-word { font-size: 1.02rem; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.brand-word small { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-muted); }

.app-nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.app-nav a {
  color: var(--brand-muted); padding: .45rem .7rem; border-radius: 8px; font-weight: 600; font-size: .92rem;
}
.app-nav a:hover { color: var(--brand-text); background: var(--brand-surface-2); text-decoration: none; }
.app-nav a.active { color: var(--brand-on-primary); background: var(--brand-primary); }
.nav-logout { margin-left: .35rem; }
.nav-logout button {
  background: transparent; color: var(--brand-muted); border: 1px solid var(--brand-border);
  padding: .4rem .7rem; border-radius: 8px; font: inherit; font-size: .9rem; cursor: pointer;
}
.nav-logout button:hover { color: var(--brand-text); border-color: var(--brand-primary); }

/* ------------------------------------------------------------- layout ----- */
.app-main { max-width: var(--maxw); margin: 0 auto; padding: calc(var(--space) * 1.5) clamp(.75rem, 3vw, 1.5rem); }
.app-footer { max-width: var(--maxw); margin: 0 auto; padding: var(--space); color: var(--brand-muted); font-size: .82rem; }
.muted { color: var(--brand-muted); }

/* breadcrumb / back link */
.crumb { display: inline-flex; align-items: center; gap: .35rem; color: var(--brand-muted); font-size: .9rem; margin-bottom: .75rem; }
.crumb a { color: var(--brand-muted); }
.crumb a:hover { color: var(--brand-text); }

/* --------------------------------------------------------------- cards ---- */
.card {
  background: linear-gradient(180deg, var(--brand-surface), var(--brand-bg-2));
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.15rem;
  margin-bottom: 1.25rem;
}
.card > h1:first-child, .card > h2:first-child { margin-top: 0; }

/* --------------------------------------------------------------- tables --- */
table { width: 100%; border-collapse: collapse; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--radius); overflow: hidden; }
th, td { text-align: left; padding: .62rem .8rem; border-bottom: 1px solid var(--brand-border); }
th { color: var(--brand-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; background: var(--brand-surface-2); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: rgba(59,125,221,.06); }

/* --------------------------------------------------------------- forms ---- */
form.card label, .field { display: block; margin: 0 0 .8rem; }
label { color: var(--brand-muted); font-size: .9rem; }
input, select, textarea {
  display: block; width: 100%; margin-top: .25rem;
  padding: .55rem .65rem;
  background: var(--brand-surface-2);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  color: var(--brand-text);
  font: inherit;
}
input[type="checkbox"] { width: auto; display: inline-block; margin: 0 .4rem 0 0; vertical-align: middle; }
input::placeholder, textarea::placeholder { color: #5e6a7e; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--ring); }
input:disabled { opacity: .6; }

/* --------------------------------------------------------------- buttons -- */
.btn, button[type="submit"] {
  display: inline-block; cursor: pointer;
  padding: .55rem 1rem;
  border: 1px solid var(--brand-primary);
  border-radius: 8px;
  background: var(--brand-primary);
  color: var(--brand-on-primary);
  font: inherit; font-weight: 600;
}
.btn:hover, button[type="submit"]:hover { background: var(--brand-primary-2); border-color: var(--brand-primary-2); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--brand-text); border-color: var(--brand-border); }
.btn-secondary:hover { border-color: var(--brand-primary); background: var(--brand-surface-2); }
.btn-danger { background: var(--brand-danger); border-color: var(--brand-danger); }
.btn-sm { padding: .3rem .6rem; font-size: .82rem; }
.btn-link { background: none; border: none; color: var(--brand-accent); padding: 0; cursor: pointer; font: inherit; }

/* htmx request indicator (e.g. the Re-sync spinner) */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* --------------------------------------------------------------- flash ---- */
.flash { padding: .7rem .9rem; border-radius: 8px; margin-bottom: var(--space); border: 1px solid var(--brand-border); background: var(--brand-surface-2); }
.flash-success { border-color: rgba(47,191,134,.5); background: rgba(47,191,134,.12); color: #aef0d2; }
.flash-error   { border-color: rgba(239,77,86,.5);  background: rgba(239,77,86,.12);  color: #ffc7ca; }
.flash-warning { border-color: rgba(227,169,59,.5); background: rgba(227,169,59,.12); color: #f4dca0; }
.error { color: #ffc7ca; }

/* ----------------------------------------------------- sync-status badges -- */
.badge, .sync-badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; border: 1px solid var(--brand-border); }
.badge-ok,      .sync-badge--ok      { background: rgba(47,191,134,.15); color: #79e7bd; border-color: rgba(47,191,134,.45); }
.badge-error,   .sync-badge--error   { background: rgba(239,77,86,.15);  color: #ff9ba1; border-color: rgba(239,77,86,.45); }
.badge-pending, .sync-badge--pending { background: rgba(227,169,59,.15); color: #f0cf8e; border-color: rgba(227,169,59,.45); }
.badge-never,   .sync-badge--never   { background: var(--brand-surface-2); color: var(--brand-muted); }
.sync-badge__error { display: block; margin-top: .25rem; color: var(--brand-danger); font-size: .78rem; }

/* --------------------------------------------------------------- login ---- */
.login-wrap { min-height: 70vh; display: grid; place-items: center; }
.login { width: 100%; max-width: 380px; text-align: left; }
.login .login-logo { display: block; margin: 0 auto .75rem; width: 64px; height: 64px; }
.login h1 { text-align: center; }

/* filter rows / toolbars */
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: var(--space); }
.toolbar .field { margin: 0; }
.row-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.row-actions form { display: flex; gap: .4rem; align-items: center; margin: 0; }
.input-sm { display: inline-block; width: auto; max-width: 170px; margin: 0; padding: .35rem .55rem; }

@media (max-width: 640px) {
  .brand-word small { display: none; }
  .app-nav a { padding: .4rem .5rem; }
}