/* ==========================================================================
   Smart Strong Solutions - Licence Management
   One stylesheet for every page.

   It used to be seven copies of the same CSS, one inside each page, which is
   why no two pages quite matched and why Bootstrap's default blue was still
   the primary colour of a company whose logo is crimson. Everything here is a
   token; nothing below sets a raw colour twice.

   The palette is taken from the logo itself - the maroon of the wordmark and
   the crimson and magenta of the flame - not chosen to look like it.
   ========================================================================== */

:root {
    /* ---- brand, sampled from the logo ---- */
    --maroon:        #6C0C0C;   /* the wordmark */
    --crimson:       #C0264C;   /* the flame */
    --magenta:       #A8246C;   /* the flame's cooler edge */
    --indigo:        #4A3A8C;   /* the gradient it fades into */

    /* ---- the working palette ---- */
    --brand:         var(--crimson);
    --brand-strong:  var(--maroon);
    --brand-soft:    #FCEFF2;
    --brand-line:    #F2D6DE;

    --ink:           #241826;   /* body text        - 15.99:1 on the ground */
    --ink-soft:      #6B6270;   /* secondary text   - 5.47:1, passes AA */
    --ground:        #FAF7F8;   /* the page */
    --surface:       #FFFFFF;   /* cards */
    --line:          #ECE6EA;

    --ok:            #14733C;
    --ok-soft:       #E8F5EE;
    --warn:          #8A5A00;
    --warn-soft:     #FDF3E2;
    --bad:           #B3261E;
    --bad-soft:      #FDECEA;

    /* ---- spacing, one scale ---- */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

    --radius:     14px;
    --radius-sm:  10px;
    --shadow:     0 1px 2px rgba(36,24,38,.06), 0 8px 24px rgba(36,24,38,.06);
    --shadow-lift:0 2px 4px rgba(36,24,38,.08), 0 16px 40px rgba(36,24,38,.10);
    --ring:       0 0 0 3px rgba(192,38,76,.28);

    --font: 'Plus Jakarta Sans', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--ground);
    -webkit-font-smoothing: antialiased;
}

/* Everything that moves, moves for the same reason and at the same speed. */
a, button, .btn, .card, input, select, textarea, .row-link {
    transition: background-color .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .18s ease, color .18s ease;
}

/* Somebody who has asked their computer to stop animating things means it. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Never remove the focus ring; make it the brand's own. */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   The shell: a sidebar on a desktop, a bar along the bottom on a phone
   ========================================================================== */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 248px;
    flex: 0 0 248px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    padding: var(--s5) var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s2) var(--s5); }
.brand img { height: 34px; width: auto; }
.brand-text { line-height: 1.15; }
.brand-name { font-weight: 700; font-size: 14px; color: var(--brand-strong); letter-spacing: -.01em; }
.brand-sub  { font-size: 11px; color: var(--ink-soft); letter-spacing: .04em; text-transform: uppercase; }

.nav-link {
    display: flex; align-items: center; gap: var(--s3);
    padding: 11px var(--s3);
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14px; font-weight: 500;
    min-height: 44px;                     /* a finger can hit it */
    cursor: pointer;
}
.nav-link svg { width: 19px; height: 19px; flex: none; stroke-width: 1.9; }
.nav-link:hover { background: var(--brand-soft); color: var(--brand-strong); }
.nav-link.is-current {
    background: linear-gradient(100deg, var(--crimson), var(--magenta));
    color: #fff;
    box-shadow: 0 6px 16px rgba(192,38,76,.28);
}
.nav-foot { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); }

.main { flex: 1; min-width: 0; padding: var(--s6) var(--s7) var(--s8); }
@media (max-width: 1100px) { .main { padding: var(--s5) var(--s5) var(--s8); } }

/* A way back, on every page that is not the dashboard. On a phone the sidebar has become a bar
   along the bottom and the browser's own back button is the only way out, which is not enough when
   a page was reached from a link in a table. */
.back {
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 40px; padding: 0 var(--s3) 0 var(--s2);
    margin-bottom: var(--s3); margin-left: calc(var(--s2) * -1);
    border-radius: var(--radius-sm);
    color: var(--ink-soft); text-decoration: none;
    font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.back svg { width: 17px; height: 17px; stroke-width: 2.2; }
.back:hover { background: var(--brand-soft); color: var(--brand-strong); }

.page-head { margin-bottom: var(--s6); }
.page-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.page-sub   { color: var(--ink-soft); margin-top: var(--s1); font-size: 14px; }

/* ==========================================================================
   Cards, statistics, tables
   ========================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--s5);
}
.card + .card { margin-top: var(--s5); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.card-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4); margin-bottom: var(--s5); }
.stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s5);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.stat::before {                                    /* a thread of the brand */
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: linear-gradient(180deg, var(--crimson), var(--magenta));
}
.stat-label { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.stat-value { font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin-top: var(--s2); font-variant-numeric: tabular-nums; }
.stat-note  { font-size: 12px; color: var(--ink-soft); margin-top: var(--s1); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
    text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-soft);
    padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--brand-soft); }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.02em; }

/* ==========================================================================
   Pills, buttons, forms
   ========================================================================== */

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: 999px;
    font-size: 12px; font-weight: 650; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-ok   { background: var(--ok-soft);   color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-bad  { background: var(--bad-soft);  color: var(--bad); }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: 44px; padding: 0 var(--s5);
    border: 1px solid transparent; border-radius: var(--radius-sm);
    font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; stroke-width: 2; }
.btn-primary {
    background: linear-gradient(100deg, var(--crimson), var(--magenta));
    color: #fff; box-shadow: 0 6px 16px rgba(192,38,76,.26);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(192,38,76,.32); }
.btn-primary:active { transform: translateY(0); }
.btn-quiet { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.btn-danger { background: var(--bad-soft); color: var(--bad); border-color: #F3C9C5; }
.btn-danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn-sm { min-height: 36px; padding: 0 var(--s3); font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.field { margin-bottom: var(--s5); }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: var(--s2); color: var(--ink); }
.field .hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], select, textarea {
    width: 100%; min-height: 46px;
    padding: 11px var(--s4);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface); font: inherit; font-size: 14.5px; color: var(--ink);
}
input:hover, select:hover, textarea:hover { border-color: #D8CFD6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
textarea { min-height: 96px; resize: vertical; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B6270' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
         background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }

/* The message sits with the thing it is about, not only at the top of the page. */
.note { display: flex; gap: var(--s3); padding: var(--s4); border-radius: var(--radius-sm); font-size: 14px; margin-bottom: var(--s5); }
.note svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.note-ok  { background: var(--ok-soft);  color: var(--ok);  border: 1px solid #C6E6D5; }
.note-bad { background: var(--bad-soft); color: var(--bad); border: 1px solid #F3C9C5; }
.note-info{ background: var(--brand-soft); color: var(--brand-strong); border: 1px solid var(--brand-line); }

.empty { text-align: center; padding: var(--s8) var(--s5); color: var(--ink-soft); }
.empty svg { width: 44px; height: 44px; stroke-width: 1.4; color: #C9BFC7; margin-bottom: var(--s4); }

/* ==========================================================================
   Signing in
   ========================================================================== */

.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--s5);
        background: radial-gradient(1100px 560px at 12% -8%, #FBEAEF 0%, var(--ground) 58%); }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line);
             border-radius: 20px; box-shadow: var(--shadow-lift); padding: var(--s7) var(--s6) var(--s6); }
.auth-logo { display: block; height: 46px; margin: 0 auto var(--s5); }
.auth-title { text-align: center; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.auth-sub { text-align: center; color: var(--ink-soft); font-size: 13.5px; margin: 6px 0 var(--s6); }
.auth-foot { text-align: center; margin-top: var(--s5); font-size: 13px; color: var(--ink-soft); }
a { color: var(--brand); }

/* ==========================================================================
   Phones: the sidebar becomes a bar along the bottom
   ========================================================================== */

@media (max-width: 860px) {
    .shell { flex-direction: column; }
    .sidebar {
        position: fixed; inset: auto 0 0 0; z-index: 40;
        width: auto; flex: none; height: auto;
        flex-direction: row; justify-content: space-around;
        padding: var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom));
        border-right: 0; border-top: 1px solid var(--line);
        box-shadow: 0 -2px 16px rgba(36,24,38,.07);
    }
    .brand, .nav-foot { display: none; }        /* the header carries the logo instead */
    .nav-link { flex-direction: column; gap: 3px; font-size: 10.5px; padding: 7px 4px; flex: 1; text-align: center; }
    .nav-link.is-current { box-shadow: none; }
    .main { padding: var(--s4) var(--s4) 96px; }   /* clear of the bar */
    .page-title { font-size: 21px; }
    .mobile-head { display: flex; align-items: center; gap: var(--s3);
                   padding: var(--s4); background: var(--surface); border-bottom: 1px solid var(--line);
                   position: sticky; top: 0; z-index: 30; }
    .mobile-head img { height: 28px; }
    .mobile-head .back { margin: 0; padding: 0 var(--s2) 0 0; min-height: 36px; }
}
@media (min-width: 861px) { .mobile-head { display: none; } }