/*
 * Eye Control CCTV Inc.
 * Shared Internal Application UI
 *
 * Canonical visual layer for:
 * - Command Center
 * - Technician Portal
 * - Locations
 * - Customers
 * - Projects
 * - Estimates
 * - Invoices
 * - Payments
 * - Inventory
 * - Service Calls
 * - Technical Information
 *
 * Mobile-first.
 * No database changes.
 */

:root {
    --ecc-ui-navy: #07111f;
    --ecc-ui-bg: #edf3f9;
    --ecc-ui-panel: rgba(255,255,255,.94);
    --ecc-ui-panel-solid: #ffffff;
    --ecc-ui-border: rgba(22,48,82,.11);

    --ecc-ui-ink: #102039;
    --ecc-ui-muted: #65748b;
    --ecc-ui-subtle: #91a0b2;

    --ecc-ui-blue: #338cff;
    --ecc-ui-cyan: #27d7ff;
    --ecc-ui-green: #25d99a;
    --ecc-ui-yellow: #ffd166;
    --ecc-ui-red: #ff5d73;

    --ecc-ui-radius-sm: 9px;
    --ecc-ui-radius-md: 14px;
    --ecc-ui-radius-lg: 18px;
    --ecc-ui-radius-xl: 22px;

    --ecc-ui-shadow:
        0 14px 35px rgba(16,32,57,.08);

    --ecc-ui-shadow-hover:
        0 18px 42px rgba(16,32,57,.12);

    --ecc-ui-touch: 44px;
}

/* =========================================================
 * INTERNAL APPLICATION FOUNDATION
 * ========================================================= */

body.ec-internal-area {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.ec-internal-area *,
body.ec-internal-area *::before,
body.ec-internal-area *::after {
    box-sizing: border-box;
}

body.ec-internal-area a {
    color: var(--ecc-ui-blue);
}

body.ec-internal-area button,
body.ec-internal-area input,
body.ec-internal-area select,
body.ec-internal-area textarea {
    font: inherit;
}

/* =========================================================
 * COMMON APPLICATION CONTAINERS
 * ========================================================= */

body.ec-internal-area .ec-office,
body.ec-internal-area .ec-tech-command-center,
body.ec-internal-area .ec-technician-portal,
body.ec-internal-area .ec-tech-portal {
    width: min(100%, 1540px);
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
 * SHARED PANELS / CARDS
 * ========================================================= */

body.ec-internal-area .ecc-ui-card {
    background: var(--ecc-ui-panel);
    color: var(--ecc-ui-ink);
    border: 1px solid var(--ecc-ui-border);
    border-radius: var(--ecc-ui-radius-lg);
    box-shadow: var(--ecc-ui-shadow);
}

body.ec-internal-area .ecc-ui-card:hover {
    box-shadow: var(--ecc-ui-shadow-hover);
}

/* =========================================================
 * SHARED BUTTON FOUNDATION
 * ========================================================= */

body.ec-internal-area .ecc-ui-button {
    min-height: var(--ecc-ui-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--ecc-ui-radius-sm);
    text-decoration: none;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease,
        border-color .15s ease;
}

body.ec-internal-area .ecc-ui-button:hover {
    transform: translateY(-1px);
}

body.ec-internal-area .ecc-ui-button:active {
    transform: translateY(0);
}

body.ec-internal-area .ecc-ui-button-primary {
    background: linear-gradient(
        135deg,
        #4897ff,
        #347fdf
    );
    color: #fff;
    box-shadow: 0 10px 24px rgba(72,151,255,.18);
}

body.ec-internal-area .ecc-ui-button-secondary {
    background: #fff;
    color: var(--ecc-ui-ink);
    border-color: #d5e0eb;
}

body.ec-internal-area .ecc-ui-button-danger {
    background: #fff;
    color: #c43d52;
    border-color: rgba(255,93,115,.35);
}

/* =========================================================
 * SHARED FORM CONTROLS
 * ========================================================= */

body.ec-internal-area .ecc-ui-field,
body.ec-internal-area .ecc-ui-input,
body.ec-internal-area .ecc-ui-select,
body.ec-internal-area .ecc-ui-textarea {
    width: 100%;
    min-height: var(--ecc-ui-touch);
    border: 1px solid #d5e0eb;
    border-radius: 10px;
    background: #fff;
    color: var(--ecc-ui-ink);
    padding: 10px 13px;
}

body.ec-internal-area .ecc-ui-textarea {
    min-height: 110px;
    resize: vertical;
}

body.ec-internal-area .ecc-ui-field:focus,
body.ec-internal-area .ecc-ui-input:focus,
body.ec-internal-area .ecc-ui-select:focus,
body.ec-internal-area .ecc-ui-textarea:focus {
    border-color: var(--ecc-ui-cyan);
    outline: none;
    box-shadow:
        0 0 0 3px rgba(39,215,255,.12),
        0 0 18px rgba(39,215,255,.08);
}

/* =========================================================
 * SHARED TABLE FOUNDATION
 * ========================================================= */

body.ec-internal-area .ecc-ui-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--ecc-ui-radius-md);
}

body.ec-internal-area .ecc-ui-table {
    width: 100%;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    color: var(--ecc-ui-ink);
}

body.ec-internal-area .ecc-ui-table th {
    padding: 11px 14px;
    background: #f4f8fc;
    color: #52647b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

body.ec-internal-area .ecc-ui-table td {
    padding: 13px 14px;
    border-top: 1px solid #e4ebf3;
    vertical-align: middle;
}

body.ec-internal-area .ecc-ui-table tbody tr:hover {
    background: #f8fbfe;
}

/* =========================================================
 * SHARED SEARCH / TOOLBAR FOUNDATION
 * ========================================================= */

body.ec-internal-area .ecc-ui-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

body.ec-internal-area .ecc-ui-search {
    position: relative;
    width: 100%;
}

body.ec-internal-area .ecc-ui-search input {
    width: 100%;
    min-height: 44px;
    padding: 0 14px 0 42px;
    border: 1px solid #d5e0eb;
    border-radius: 10px;
    background: #fff;
    color: var(--ecc-ui-ink);
}

body.ec-internal-area .ecc-ui-search::before {
    content: "⌕";
    position: absolute;
    left: 14px;
    top: 8px;
    z-index: 2;
    color: #718198;
    font-size: 22px;
    pointer-events: none;
}

/* =========================================================
 * STATUS PILLS
 * ========================================================= */

body.ec-internal-area .ecc-ui-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

body.ec-internal-area .ecc-ui-status-blue {
    color: #1765c0;
    background: rgba(51,140,255,.12);
}

body.ec-internal-area .ecc-ui-status-green {
    color: #087653;
    background: rgba(37,217,154,.14);
}

body.ec-internal-area .ecc-ui-status-yellow {
    color: #8a6200;
    background: rgba(255,209,102,.20);
}

body.ec-internal-area .ecc-ui-status-red {
    color: #b33449;
    background: rgba(255,93,115,.13);
}

/* =========================================================
 * MOBILE
 * ========================================================= */

@media (max-width: 760px) {

    body.ec-internal-area .ecc-ui-card {
        border-radius: var(--ecc-ui-radius-md);
    }

    body.ec-internal-area .ecc-ui-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    body.ec-internal-area .ecc-ui-toolbar > * {
        width: 100%;
    }

    body.ec-internal-area .ecc-ui-button {
        width: 100%;
        min-height: 46px;
    }

    body.ec-internal-area .ecc-ui-table-wrap {
        margin-left: -1px;
        margin-right: -1px;
        width: calc(100% + 2px);
    }
}

@media (prefers-reduced-motion: reduce) {

    body.ec-internal-area .ecc-ui-button,
    body.ec-internal-area .ecc-ui-card {
        transition: none;
    }
}

/* =========================================================
 * ECC INTERNAL COMPONENT NORMALIZATION
 *
 * Existing Command Center / Technician component names
 * share the same visual language without requiring markup
 * rewrites.
 * ========================================================= */

/* ---------------------------------------------------------
 * Application cards / panels
 * --------------------------------------------------------- */

body.ec-internal-area .ec-office-card,
body.ec-internal-area .ec-office-panel,
body.ec-internal-area .ec-office-stat-card {
    border-radius: var(--ecc-ui-radius-lg);
}

body.ec-internal-area .ec-office-card-header,
body.ec-internal-area .ec-office-panel-heading {
    border-radius: inherit;
}

/* ---------------------------------------------------------
 * Buttons
 * --------------------------------------------------------- */

body.ec-internal-area .ec-office-button,
body.ec-internal-area .ec-tech-button {
    min-height: var(--ecc-ui-touch);
    border-radius: var(--ecc-ui-radius-sm);
    font-weight: 750;
}

body.ec-internal-area .ec-office-button:hover,
body.ec-internal-area .ec-tech-button:hover {
    transform: translateY(-1px);
}

body.ec-internal-area .ec-office-button:active,
body.ec-internal-area .ec-tech-button:active {
    transform: translateY(0);
}

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

body.ec-internal-area .ec-office-form input,
body.ec-internal-area .ec-office-form select,
body.ec-internal-area .ec-office-form textarea,
body.ec-internal-area .ec-tech-form-field input,
body.ec-internal-area .ec-tech-form-field select,
body.ec-internal-area .ec-tech-form-field textarea {
    min-height: var(--ecc-ui-touch);
    border-radius: 10px;
}

/* ---------------------------------------------------------
 * Tables
 * --------------------------------------------------------- */

body.ec-internal-area .ec-office-table-wrap,
body.ec-internal-area .ec-tech-device-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.ec-internal-area .ec-office-table,
body.ec-internal-area .ec-tech-device-table {
    border-collapse: separate;
    border-spacing: 0;
}

/* ---------------------------------------------------------
 * Page headers
 * --------------------------------------------------------- */

body.ec-internal-area .ec-office-page-header {
    margin-bottom: 20px;
}

body.ec-internal-area .ec-office-eyebrow,
body.ec-internal-area .ec-tech-command-eyebrow {
    letter-spacing: .10em;
    text-transform: uppercase;
    font-weight: 800;
}

/* ---------------------------------------------------------
 * Empty states
 * --------------------------------------------------------- */

body.ec-internal-area .ec-office-empty,
body.ec-internal-area .ec-tech-command-empty,
body.ec-internal-area .ec-tech-empty {
    border-radius: var(--ecc-ui-radius-lg);
}

/* ---------------------------------------------------------
 * Technician cards
 * --------------------------------------------------------- */

body.ec-internal-area .ec-tech-command-card,
body.ec-internal-area .ec-tech-dashboard-stat,
body.ec-internal-area .ec-tech-device,
body.ec-internal-area .ec-tech-device-management {
    border-radius: var(--ecc-ui-radius-lg);
}

/* ---------------------------------------------------------
 * Mobile touch targets
 * --------------------------------------------------------- */

@media (max-width: 760px) {

    body.ec-internal-area .ec-office-button,
    body.ec-internal-area .ec-tech-button,
    body.ec-internal-area .ec-tech-command-action,
    body.ec-internal-area .ec-tech-command-quick-action {
        min-height: 46px;
    }

    body.ec-internal-area .ec-office-actions,
    body.ec-internal-area .ec-tech-actions {
        gap: 9px;
    }

    body.ec-internal-area .ec-office-page-header {
        margin-bottom: 16px;
    }
}