/* ---------------------------------------------------------------------------
   ActBook design tokens and shared components.
   Loaded last, so these win over the legacy stylesheets on conflict.

   Why this file exists: the app had three competing "primary" blues in play at
   once — #4285f4 (its own), #0d6efd (Bootstrap's) and #2563eb (from newer
   pages) — plus grey scales borrowed from two different systems. Every new
   screen re-declared its own spacing, radii and shadows inline. This is the one
   place those decisions live.

   #4285f4 stays the brand blue because it is what the login screen, the focus
   rings and the primary buttons have always used. It is only ~3.1:1 on white
   though, so text and links use the darker --ab-primary-ink (~4.6:1) to clear
   WCAG AA while staying recognisably the same colour.
--------------------------------------------------------------------------- */

:root {
    /* Brand */
    --ab-primary:        #4285f4;
    --ab-primary-hover:  #3b78dd;
    --ab-primary-ink:    #1967d2;  /* for text and links on white */
    --ab-primary-soft:   rgba(66, 133, 244, 0.12);
    --ab-primary-ring:   rgba(66, 133, 244, 0.25);

    /* Status */
    --ab-success:      #157347;
    --ab-success-soft: rgba(21, 115, 71, 0.10);
    --ab-warning:      #92400e;
    --ab-warning-soft: #fef3c7;
    --ab-warning-line: #fcd34d;
    --ab-danger:       #b91c1c;
    --ab-danger-soft:  rgba(185, 28, 28, 0.10);

    /* Neutrals */
    --ab-ink:        #1f2937;
    --ab-ink-muted:  #6b7280;
    --ab-ink-faint:  #9ca3af;
    --ab-line:       #e5e7eb;
    --ab-line-strong:#d1d5db;
    --ab-surface:    #ffffff;
    --ab-surface-alt:#f9fafb;

    /* Spacing — a 4px scale, so panels line up across pages */
    --ab-space-1: 4px;
    --ab-space-2: 8px;
    --ab-space-3: 12px;
    --ab-space-4: 16px;
    --ab-space-5: 24px;
    --ab-space-6: 32px;

    /* Shape */
    --ab-radius-sm: 6px;
    --ab-radius:    8px;
    --ab-radius-lg: 12px;
    --ab-radius-pill: 999px;

    --ab-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08);
    --ab-shadow:    0 4px 14px rgba(17, 24, 39, 0.10);

    /* Type */
    --ab-font-sm: 13px;
    --ab-font:    14px;
    --ab-font-lg: 16px;
}

/* --- Surfaces ---------------------------------------------------------- */

.ab-card {
    background: var(--ab-surface);
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius-lg);
    padding: var(--ab-space-4);
    box-shadow: var(--ab-shadow-sm);
}

.ab-card-tight { padding: var(--ab-space-3); }

/* --- Notes and messages ------------------------------------------------ */

.ab-note {
    font-size: var(--ab-font-sm);
    color: var(--ab-ink-muted);
    line-height: 1.5;
}

.ab-callout {
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    padding: var(--ab-space-3) var(--ab-space-4);
    font-size: var(--ab-font);
    line-height: 1.5;
}

.ab-callout-warning {
    background: var(--ab-warning-soft);
    border-color: var(--ab-warning-line);
    color: var(--ab-warning);
}

.ab-callout-success {
    background: var(--ab-success-soft);
    border-color: var(--ab-success);
    color: var(--ab-success);
}

.ab-callout-danger {
    background: var(--ab-danger-soft);
    border-color: var(--ab-danger);
    color: var(--ab-danger);
}

/* --- Empty states ------------------------------------------------------ */
/* Six accounts signed up in five weeks and never created anything; every list
   they opened was a bare table. An empty state is the only copy they read. */

.ab-empty {
    text-align: center;
    padding: var(--ab-space-6) var(--ab-space-4);
    color: var(--ab-ink-muted);
}

.ab-empty-title {
    font-size: var(--ab-font-lg);
    color: var(--ab-ink);
    margin-bottom: var(--ab-space-1);
}

.ab-empty-body {
    font-size: var(--ab-font-sm);
    margin-bottom: var(--ab-space-4);
}

.ab-empty-actions {
    display: flex;
    gap: var(--ab-space-2);
    justify-content: center;
    flex-wrap: wrap;
}

/* --- Forms ------------------------------------------------------------- */

.ab-field { display: block; margin-bottom: var(--ab-space-3); }

.ab-field > label {
    display: block;
    font-weight: 600;
    font-size: var(--ab-font);
    margin-bottom: var(--ab-space-1);
    color: var(--ab-ink);
}

.ab-field > .ab-hint {
    font-size: 12px;
    color: var(--ab-ink-muted);
    margin-top: var(--ab-space-1);
}

.ab-input,
.ab-field input[type="text"],
.ab-field input[type="email"],
.ab-field input[type="number"],
.ab-field input[type="date"],
.ab-field input[type="time"],
.ab-field select,
.ab-field textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--ab-line-strong);
    border-radius: var(--ab-radius-sm);
    font-size: var(--ab-font);
    font-family: inherit;
    background: var(--ab-surface);
    color: var(--ab-ink);
}

.ab-input:focus,
.ab-field input:focus,
.ab-field select:focus,
.ab-field textarea:focus {
    outline: none;
    border-color: var(--ab-primary);
    box-shadow: 0 0 0 3px var(--ab-primary-ring);
}

/* --- Selectable cards (template gallery, option pickers) ---------------- */

.ab-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--ab-space-3);
}

.ab-choice {
    display: block;
    position: relative;
    border: 2px solid var(--ab-line);
    border-radius: var(--ab-radius-lg);
    padding: var(--ab-space-4);
    background: var(--ab-surface);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.ab-choice:hover { border-color: var(--ab-primary); }
.ab-choice.selected {
    border-color: var(--ab-primary);
    box-shadow: 0 0 0 3px var(--ab-primary-soft);
}
.ab-choice input[type="radio"],
.ab-choice input[type="checkbox"].ab-choice-input {
    position: absolute;
    opacity: 0;
}
.ab-choice h4 { margin: 0 0 var(--ab-space-1); font-size: 15px; }
.ab-choice .ab-choice-who { font-size: 12px; color: var(--ab-primary-ink); margin-bottom: var(--ab-space-1); }
.ab-choice p { margin: 0; font-size: var(--ab-font-sm); color: #4b5563; line-height: 1.45; }

/* --- Tick lists (clause pickers) --------------------------------------- */

.ab-tick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ab-space-2);
}

.ab-tick {
    display: flex;
    gap: var(--ab-space-2);
    align-items: flex-start;
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    padding: 9px 11px;
    background: var(--ab-surface);
    cursor: pointer;
}

.ab-tick:hover { border-color: var(--ab-line-strong); }
.ab-tick strong { font-size: var(--ab-font-sm); }
.ab-tick .ab-tick-body {
    display: block;
    font-size: 12px;
    color: var(--ab-ink-muted);
    line-height: 1.4;
    margin-top: 2px;
}

/* --- Chips (merge tags) ------------------------------------------------ */

.ab-chip {
    display: inline-block;
    padding: 3px 9px;
    margin: 0 var(--ab-space-1) var(--ab-space-1) 0;
    border-radius: var(--ab-radius-pill);
    background: var(--ab-primary-soft);
    color: var(--ab-primary-ink);
    font-size: 12px;
    cursor: pointer;
    border: 1px solid transparent;
}

.ab-chip:hover { border-color: var(--ab-primary); }

.ab-group-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ab-ink-muted);
    margin-bottom: var(--ab-space-1);
}

/* --- Toolbars ---------------------------------------------------------- */

.ab-toolbar {
    display: flex;
    gap: var(--ab-space-2);
    align-items: center;
    flex-wrap: wrap;
}

.ab-toolbar-spread {
    justify-content: space-between;
    margin-bottom: var(--ab-space-3);
}

/* --- Progress ---------------------------------------------------------- */

.ab-progress {
    height: 6px;
    background: var(--ab-line);
    border-radius: var(--ab-radius-pill);
    overflow: hidden;
}

.ab-progress > span {
    display: block;
    height: 100%;
    background: var(--ab-success);
}

/* --- Small screens ----------------------------------------------------- */

@media (max-width: 720px) {
    .ab-choice-grid,
    .ab-tick-grid { grid-template-columns: 1fr; }
    .ab-card { padding: var(--ab-space-3); }
}

/* --- jQuery UI widgets ------------------------------------------------- */
/* The datepicker, dialog, tabs and accordion come from jQuery UI 1.13's base
   theme, which is deliberately plain. This gives them the same palette,
   radii and shadows as everything else so they stop looking bolted on. */

.ui-widget {
    font-family: inherit !important;
    font-size: var(--ab-font) !important;
}

.ui-widget-content,
.ui-widget.ui-widget-content {
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius);
    background: var(--ab-surface);
    color: var(--ab-ink);
}

.ui-widget-header {
    background: var(--ab-surface-alt);
    border: none;
    border-bottom: 1px solid var(--ab-line);
    color: var(--ab-ink);
    font-weight: 600;
}

.ui-datepicker {
    padding: var(--ab-space-2);
    box-shadow: var(--ab-shadow);
    width: auto;
    min-width: 17em;
}

.ui-datepicker .ui-datepicker-header {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--ab-space-1) 0 var(--ab-space-2);
}

.ui-datepicker .ui-datepicker-title {
    font-size: var(--ab-font);
    font-weight: 600;
}

.ui-datepicker th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ab-ink-muted);
    font-weight: 600;
}

.ui-datepicker td a,
.ui-datepicker td span {
    text-align: center;
    padding: 6px;
    border-radius: var(--ab-radius-sm);
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button {
    border: 1px solid var(--ab-line);
    background: var(--ab-surface);
    color: var(--ab-ink);
    font-weight: 500;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-button:hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus {
    border-color: var(--ab-primary);
    background: var(--ab-primary-soft);
    color: var(--ab-primary-ink);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-datepicker td .ui-state-active {
    border-color: var(--ab-primary);
    background: var(--ab-primary);
    color: #fff;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
    border-color: var(--ab-primary);
    background: var(--ab-primary-soft);
    color: var(--ab-primary-ink);
}

.ui-dialog {
    border-radius: var(--ab-radius-lg);
    box-shadow: var(--ab-shadow);
    padding: 0;
}

.ui-dialog .ui-dialog-titlebar {
    border-radius: var(--ab-radius-lg) var(--ab-radius-lg) 0 0;
    padding: var(--ab-space-3) var(--ab-space-4);
}

.ui-dialog .ui-dialog-content { padding: var(--ab-space-4); }

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-right,
.ui-corner-bottom { border-radius: var(--ab-radius-sm); }

.ui-tabs .ui-tabs-nav {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ab-line);
    border-radius: 0;
    padding: 0;
}

.ui-tabs .ui-tabs-nav li { border: none; background: transparent; margin: 0 var(--ab-space-1) -1px 0; }
.ui-tabs .ui-tabs-nav li a { color: var(--ab-ink-muted); padding: var(--ab-space-2) var(--ab-space-3); }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { border-bottom: 2px solid var(--ab-primary); background: transparent; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: var(--ab-primary-ink); font-weight: 600; }
.ui-tabs .ui-tabs-panel { padding: var(--ab-space-4) 0; }

.ui-accordion .ui-accordion-header {
    background: var(--ab-surface-alt);
    border: 1px solid var(--ab-line);
    border-radius: var(--ab-radius-sm);
    margin-top: var(--ab-space-1);
    padding: var(--ab-space-2) var(--ab-space-3);
    font-weight: 600;
}

.ui-widget-overlay { background: rgba(17, 24, 39, .45); opacity: 1; }