/* ════════════════════════════════════════════════
   iKingdom site styles — mirrors OurCRM's b3-bare
   theme tokens (Inter, indigo accent, light sidebar)
   inlined as plain CSS. Source-of-truth for tokens
   is OurCRM's _b3-variables.scss.
   ════════════════════════════════════════════════ */

:root {
    --b3-color-primary:        #6366f1;
    --b3-color-primary-hover:  #4f46e5;
    --b3-color-link:           #6366f1;
    --b3-color-dark:           #0b0d12;
    --b3-color-muted:          #6b7280;
    --b3-color-success:        #10b981;
    --b3-color-danger:         #ef4444;
    --b3-color-warning:        #f59e0b;

    --b3-bg-page:              #f7f7f8;
    --b3-bg-surface:           #ffffff;
    --b3-bg-recessed:          #fafafa;

    /* Dark sidebar — same hue family OurCRM's b3-fluentui theme uses
       (D365 dark navy). Brand text and nav items live on this surface. */
    --b3-bg-sidebar:           #1b2838;
    --b3-sidebar-bg:           #1b2838;

    --b3-border-color:         #e5e5e8;
    --b3-border-color-light:   #eceef2;

    --b3-font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --b3-font-size-sm:         11px;
    --b3-font-size-md:         13px;
    --b3-font-size-base:       14px;
    --b3-font-size-lg:         16px;

    --b3-shadow-sm:            0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
    --b3-shadow-hover:         0 4px 12px rgba(0, 0, 0, .10), 0 2px 4px rgba(0, 0, 0, .05);

    --b3-radius-md:            0.375rem;
    --b3-radius-lg:            0.625rem;

    /* Nav-on-dark palette */
    --b3-nav-link-color:           #c8c6c4;                  /* Fluent neutralTertiaryAlt */
    --b3-nav-link-active-bg:       rgba(255, 255, 255, 0.10);
    --b3-nav-link-active-color:    #ffffff;
    --b3-nav-link-hover-bg:        rgba(255, 255, 255, 0.06);
    --b3-nav-link-hover-color:     #ffffff;
    --b3-nav-link-border-radius:   6px;
    --b3-nav-section-label-color: rgba(255, 255, 255, 0.55);
    --b3-nav-section-label-strong: rgba(255, 255, 255, 0.85);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--b3-font-family);
    font-size: var(--b3-font-size-base);
    color: var(--b3-color-dark);
    background: var(--b3-bg-page);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--b3-color-link);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { letter-spacing: -0.01em; margin-top: 0; }
h1 { font-size: 1.5rem;  font-weight: 700; margin-bottom: 8px; }
h2 { font-size: 1.1rem;  font-weight: 700; margin-bottom: 8px; }
h3 { font-size: 1rem;    font-weight: 600; margin-bottom: 6px; }

p { margin: 0 0 12px 0; }

button {
    font-family: inherit;
    font-size: var(--b3-font-size-base);
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--b3-border-color);
    background: var(--b3-bg-surface);
    color: var(--b3-color-dark);
    cursor: pointer;
    transition: background-color 0.1s, border-color 0.1s;
}
button:hover:not(:disabled) {
    background: var(--b3-bg-recessed);
    border-color: #d4d4d8;
}
button:disabled { opacity: 0.55; cursor: not-allowed; }

button.primary, button[type="submit"] {
    background: var(--b3-color-primary);
    color: white;
    border-color: var(--b3-color-primary);
}
button.primary:hover:not(:disabled),
button[type="submit"]:hover:not(:disabled) {
    background: var(--b3-color-primary-hover);
    border-color: var(--b3-color-primary-hover);
}

input, textarea, select {
    font-family: inherit;
    font-size: var(--b3-font-size-base);
    border: 1px solid var(--b3-border-color);
    border-radius: 6px;
    padding: 6px 10px;
    background: var(--b3-bg-surface);
    color: var(--b3-color-dark);
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--b3-color-primary);
    outline-offset: -1px;
    border-color: var(--b3-color-primary);
}

table {
    border-collapse: collapse;
    font-size: var(--b3-font-size-base);
    width: 100%;
    background: var(--b3-bg-surface);
}
th, td { padding: 8px 12px; border-bottom: 1px solid var(--b3-border-color-light); text-align: left; }
th { font-weight: 600; color: var(--b3-color-muted); border-bottom: 1px solid var(--b3-border-color); background: var(--b3-bg-recessed); }

code {
    background: #f1f1f4;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.92em;
    font-family: 'Menlo', 'Consolas', monospace;
}