/*
 * Sangford Campus360 — canonical UI entry v1.0.1
 * Approved and locked: 22/08/2026
 *
 * Pages link only this file for the shared UI foundation. Existing ui-v1
 * modules are imported while they are consolidated; legacy assets/css files
 * are frozen and must not receive new dependencies.
 */
@import url("./c360-tokens.css?v=1.0.0");
@import url("./c360-base.css?v=1.0.0");
@import url("./c360-layout.css?v=1.0.0");
@import url("./c360-components.css?v=1.0.0");
@import url("./c360-utilities.css?v=1.0.0");
@import url("./c360-shell.css?v=1.1.0");
@import url("./c360-mobile-menu-fix.css?v=1.0.1");

/* Pilot page patterns. */
@import url("./c360-general-task.css?v=1.2.1");
@import url("./c360-class-master.css?v=1.5.0");
@import url("./c360-employee-master.css?v=1.2.0");

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-variable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

body.c360-ui {
    --c360-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --c360-control-md: 40px;
    --c360-approved-checkbox-size: 16px;
    font-family: var(--c360-font-sans);
}

body.c360-ui button,
body.c360-ui input,
body.c360-ui select,
body.c360-ui textarea {
    font-family: inherit;
}

body.c360-ui :where(.c360-input, .c360-select, .c360-btn:not(.c360-btn--sm)) {
    min-height: var(--c360-control-md);
}

body.c360-ui :where(.c360-input, .c360-select) {
    height: var(--c360-control-md);
    border-radius: 7px;
}

body.c360-ui select.c360-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    background-color: var(--c360-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a635c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}

body.c360-ui select.c360-select:hover {
    border-color: #7eaaa6;
    background-color: #fbfefe;
}

body.c360-ui select.c360-select:disabled {
    background-color: var(--c360-slate-50);
    color: var(--c360-slate-600);
    cursor: not-allowed;
}

body.c360-ui input[type="checkbox"],
body.c360-ui input[type="radio"] {
    width: var(--c360-approved-checkbox-size);
    height: var(--c360-approved-checkbox-size);
    min-height: 0;
    flex: 0 0 var(--c360-approved-checkbox-size);
    margin: 0;
    padding: 0;
    accent-color: var(--c360-brand-600);
}

body.c360-ui.c360-general-task-page {
    --gt-control-height: 40px;
    --gt-checkbox-size: 16px;
}

body.c360-ui.c360-general-task-page .gt-checkbox-control input,
body.c360-ui.c360-general-task-page .gt-person-option input {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
}

body.c360-ui ul:not(.c360-timeline):not(.gt-timeline):not(.cm-audit-history) li::marker {
    color: var(--c360-brand-700);
    font-size: .7em;
}

body.c360-ui .c360-alert__icon {
    color: #ffffff;
}

body.c360-ui .c360-alert--info .c360-alert__icon {
    background: var(--c360-info-700);
}

body.c360-ui .c360-alert--success .c360-alert__icon {
    background: var(--c360-success-700);
}

body.c360-ui .c360-alert--warning .c360-alert__icon {
    background: var(--c360-warning-800);
}

body.c360-ui .c360-alert--danger .c360-alert__icon {
    background: var(--c360-danger-700);
}

.c360-attachment-control {
    position: relative;
    min-height: var(--c360-control-md);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 11px;
    border: 1px solid var(--c360-border-strong);
    border-radius: 7px;
    background: var(--c360-white);
    cursor: pointer;
}

.c360-attachment-control:hover {
    border-color: #7eaaa6;
    background: #fbfefe;
}

.c360-attachment-control > svg,
.c360-attachment-link > svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c360-attachment-copy {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.c360-attachment-copy strong {
    color: var(--c360-brand-700);
    font-size: 11px;
}

.c360-attachment-copy span {
    overflow: hidden;
    color: var(--c360-slate-600);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c360-attachment-control input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.c360-attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.c360-summary-card {
    min-height: 112px;
}

.c360-table th {
    height: 44px;
}

.c360-table-sort {
    width: 100%;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

.c360-table-sort::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .45;
    transform: rotate(45deg) translate(-1px, -1px);
}

th[aria-sort="ascending"] .c360-table-sort::after {
    opacity: 1;
    transform: rotate(225deg) translate(-1px, -1px);
}

th[aria-sort="descending"] .c360-table-sort::after {
    opacity: 1;
    transform: rotate(45deg) translate(-1px, -1px);
}

.c360-icon-action {
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #b6d8d3;
    border-radius: 50%;
    background: var(--c360-white);
    color: var(--c360-brand-700);
    text-decoration: none;
}

.c360-icon-action:hover {
    border-color: var(--c360-brand-600);
    background: var(--c360-brand-50);
    color: var(--c360-brand-900);
}

.c360-icon-action svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cm-register-filter-action {
    gap: var(--c360-space-2);
}

@media (max-width: 820px) {
    body.c360-ui {
        --c360-control-md: 44px;
    }

    body.c360-ui.c360-general-task-page {
        --gt-control-height: 44px;
    }
}