/* =====================================================================
   form-panel-common.css
   ============================================================
   THE single shared stylesheet for the whole application.
   It is already linked on every page that uses Views/Shared/_Layout.cshtml,
   so changing a value here updates every page that loads the layout -
   no other file needs to change.

   Everything below is a CSS custom property (variable) on :root, prefixed
   "--tc-" (TracInv Common). Other stylesheets/pages read these instead of
   hard-coding their own colors/sizes - company-form-design.css already
   does this (it was written against this exact file).

   HOW TO USE FROM A PAGE/STYLESHEET
   ----------------------------------
   Don't hard-code a color, size or font - reference the token:
       .my-button { background: var(--tc-primary); border-radius: var(--tc-radius-sm); }
   or use the ready-made utility classes at the bottom of this file
   (.tc-input, .tc-btn / .tc-btn-primary / .tc-btn-outline, .tc-icon-*).

   The 9 categories requested, and where they live below:
     1. Input field size      -> --tc-control-h / --tc-control-h-lg, .tc-input
     2. Border radius         -> --tc-radius / --tc-radius-sm / --tc-radius-lg
     3. Button size           -> --tc-btn-h / --tc-btn-h-sm / --tc-btn-px, .tc-btn
     4. Button colour         -> --tc-primary / --tc-primary-dark, .tc-btn-primary / .tc-btn-outline
     5. Font size              -> --tc-fs-xs ... --tc-fs-xl
     6. Font family            -> --tc-font-family
     7. Font weight            -> --tc-fw-regular ... --tc-fw-bold
     8. Background colour      -> --tc-bg / --tc-surface / --tc-head-bg
     9. Icon size               -> --tc-icon-xs ... --tc-icon-xl, .tc-icon-*
   ===================================================================== */

:root {
    /* ---- 6 & 7. Fonts ---- */
    --tc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --tc-fs-xs: 11px;
    --tc-fs-sm: 12px;
    --tc-fs-base: 13px;
    --tc-fs-md: 14px;
    --tc-fs-lg: 16px;
    --tc-fs-xl: 20px;
    --tc-fw-regular: 400;
    --tc-fw-medium: 500;
    --tc-fw-semibold: 600;
    --tc-fw-bold: 700;

    /* ---- 4 & 8. Colours (brand = the TracInv sidebar colour, #405189,
       already the dominant colour across the rest of the application) ---- */
    --tc-primary: #405189;
    --tc-primary-dark: #364574;
    --tc-primary-light: #eef0f7;
    --tc-primary-ring: rgba(64, 81, 137, .12);
    --tc-blue: #405189;
    --tc-blue-bg: #e8ebf5;
    --tc-secondary: #74788d;
    --tc-green: #0ab39c;
    --tc-green-bg: #e2f6f3;
    --tc-orange: #f1963b;
    --tc-orange-bg: #fdf1e3;
    --tc-purple: #7c3aed;
    --tc-purple-bg: #f1e9fd;
    --tc-danger: #c0392b;
    --tc-danger-bg: #fdecee;
    --tc-white: #ffffff;

    --tc-text: #1f2430;
    --tc-text-muted: #7b7682;
    --tc-text-placeholder: #a9a4b0;
    --tc-border: #e4e1e7;
    --tc-border-soft: #eeecf0;

    --tc-bg: #f3f3f9;
    --tc-surface: #ffffff;
    --tc-head-bg: #f6f7fb;

    /* ---- 2. Border radius ---- */
    --tc-radius: 8px;
    --tc-radius-sm: 4px;
    --tc-radius-lg: 14px;

    /* ---- 1. Input / control size ---- */
    --tc-control-h: 32px;
    --tc-control-h-lg: 40px;

    /* ---- 3. Button size ---- */
    --tc-btn-h: 34px;
    --tc-btn-h-sm: 30px;
    --tc-btn-px: 18px;

    /* ---- 9. Icon size ---- */
    --tc-icon-xs: 12px;
    --tc-icon-sm: 14px;
    --tc-icon-md: 16px;
    --tc-icon-lg: 20px;
    --tc-icon-xl: 24px;
}

/* ============ Ready-made utility classes built from the tokens above ============
   Opt-in: add these classes where you want the shared look. They don't touch
   any existing page's markup on their own. */

.tc-input,
input.tc-input,
select.tc-input,
textarea.tc-input {
    box-sizing: border-box;
    height: var(--tc-control-h);
    padding: 0 10px;
    font-family: var(--tc-font-family);
    font-size: var(--tc-fs-base);
    font-weight: var(--tc-fw-regular);
    color: var(--tc-text);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-sm);
}

    .tc-input:focus {
        outline: none;
        border-color: var(--tc-primary);
        box-shadow: 0 0 0 3px var(--tc-primary-ring);
    }

    .tc-input::placeholder {
        color: var(--tc-text-placeholder);
    }

.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--tc-btn-h);
    padding: 0 var(--tc-btn-px);
    font-family: var(--tc-font-family);
    font-size: var(--tc-fs-base);
    font-weight: var(--tc-fw-semibold);
    line-height: 1;
    border-radius: var(--tc-radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

    .tc-btn.tc-btn-sm {
        height: var(--tc-btn-h-sm);
        padding: 0 14px;
    }

    .tc-btn i {
        font-size: var(--tc-icon-md);
        line-height: 1;
    }

.tc-btn-primary {
    background: var(--tc-primary);
    border-color: var(--tc-primary);
    color: var(--tc-white) !important;
}

    .tc-btn-primary:hover {
        background: var(--tc-primary-dark);
        border-color: var(--tc-primary-dark);
    }

.tc-btn-outline {
    background: var(--tc-surface);
    border-color: var(--tc-primary);
    color: var(--tc-primary) !important;
}

    .tc-btn-outline:hover {
        background: var(--tc-primary-light);
    }

.tc-icon-xs { font-size: var(--tc-icon-xs) !important; }
.tc-icon-sm { font-size: var(--tc-icon-sm) !important; }
.tc-icon-md { font-size: var(--tc-icon-md) !important; }
.tc-icon-lg { font-size: var(--tc-icon-lg) !important; }
.tc-icon-xl { font-size: var(--tc-icon-xl) !important; }

/* =====================================================================
   Standard "Back" button (replaces every page-level Cancel button)
   Usage: <button type="button" class="... tr-back-btn" onclick="..."><i class="ri-arrow-left-line"></i> Back</button>
   White button with a visible border and a left arrow, on every page.
   Doubled class + !important so page/module CSS (po-btn-light, wt-btn, etc.)
   cannot remove the border or change the colours.
   ===================================================================== */
html body .tr-back-btn.tr-back-btn:not([class*="hidden"]) {
    display: inline-flex;
}

html body .tr-back-btn.tr-back-btn {
    align-items: center !important;
    justify-content: center;
    gap: 6px !important;
    background: #fff !important;
    background-image: none !important;
    color: #1f2937 !important;
    border: 1px solid #c3cad9 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap;
    cursor: pointer;
}

    html body .tr-back-btn.tr-back-btn:hover,
    html body .tr-back-btn.tr-back-btn:focus-visible {
        background: #f3f5fa !important;
        border-color: #405189 !important;
        color: #405189 !important;
    }

    html body .tr-back-btn.tr-back-btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 3px rgba(64, 81, 137, .15) !important;
    }

    html body .tr-back-btn.tr-back-btn > i {
        font-size: 1.1em;
        line-height: 1;
        color: inherit !important;
        margin: 0 !important;
    }