/* ==========================================================
   Company Settings
   Office aesthetic
   ========================================================== */

.company-settings-page {
    display: grid;
    gap: 22px;
    --company-card: var(--surface);
    --company-card-strong: color-mix(in srgb, var(--surface-2) 92%, var(--surface));
    --company-field: var(--surface);
    --company-field-focus: var(--surface);
    --company-border: var(--border);
}

.company-settings-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 0 10px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.company-settings-hero::before {
    display: none;
}

.company-settings-hero > * {
    position: relative;
    z-index: 1;
}

.company-chip,
.office-code {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--app-primary) 18%, var(--company-border));
    border-radius: 999px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--app-primary) 8%, transparent);
    color: var(--app-primary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.company-settings-hero h1 {
    margin: 10px 0 4px;
    color: var(--text);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.company-settings-hero p {
    max-width: 680px;
    margin: 0;
    color: var(--text-muted);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.7;
}

.company-full-setup-btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    column-gap: 17px;
    min-width: 270px;
    padding: 15px 16px 15px 19px;
    border: 1px solid color-mix(in srgb, var(--app-primary) 22%, var(--company-border));
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary) 8%, var(--surface)), var(--surface));
    box-shadow: var(--shadow-sm);
    color: var(--text);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.company-full-setup-btn:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--app-primary) 42%, var(--company-border));
    box-shadow: var(--shadow-md);
}

.company-full-setup-btn span,
.company-full-setup-btn strong { display: block; }

.company-full-setup-btn span {
    color: var(--app-primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.company-full-setup-btn strong {
    margin-top: 4px;
    font-size: .88rem;
}

.company-full-setup-btn b {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: var(--app-primary);
    color: #fff;
}

.company-alert {
    padding: 14px 16px;
    border: 1px solid var(--company-border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    font-size: .88rem;
    font-weight: 650;
}

.company-alert.success {
    background: color-mix(in srgb, #22c55e 8%, var(--surface));
    color: #15803d;
    border-color: color-mix(in srgb, #22c55e 36%, var(--company-border));
}

.company-alert.danger {
    background: color-mix(in srgb, #ef4444 8%, var(--surface));
    color: #dc2626;
    border-color: color-mix(in srgb, #ef4444 36%, var(--company-border));
}

.company-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .85fr);
    gap: 18px;
    align-items: start;
}

.company-panel {
    position: relative;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--company-border);
    border-radius: 22px;
    background: var(--company-card);
    box-shadow: var(--shadow-md);
}

.company-panel::before {
    display: none;
}

.company-panel-header,
.company-form-grid,
.company-office-list,
.company-empty {
    position: relative;
    z-index: 1;
}

.company-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.company-panel-header h3,
.company-panel h3 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.company-panel-header p,
.company-office-card p,
.company-empty p,
.company-map-help,
.company-office-card small,
.company-form-grid small,
.company-validation {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 500;
}

.company-validation {
    margin-bottom: 16px;
    color: #dc2626;
}

.company-color-preview {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid var(--company-border);
    border-radius: 14px;
    box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--company-card) 70%, transparent);
}

.company-logo-preview {
    margin-top: 12px;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--company-border);
    border-radius: 18px;
    background: var(--company-card-strong);
}

.company-logo-preview img {
    max-width: 220px;
    max-height: 100px;
    object-fit: contain;
}

.company-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.company-full {
    grid-column: 1 / -1;
}

.company-form-grid label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 650;
}

.company-form-grid input,
.company-form-grid textarea,
.company-form-grid select {
    width: 100%;
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--company-border) 78%, #64748b 22%);
    border-radius: 14px;
    outline: none;
    padding: 10px 12px;
    background: var(--company-field);
    color: var(--text);
    font-size: .86rem;
    font-weight: 500;
    transition: .18s ease;
}

.company-form-grid textarea {
    resize: vertical;
    min-height: 92px;
}

.company-form-grid input::placeholder,
.company-form-grid textarea::placeholder {
    color: var(--text-muted);
}

.company-form-grid input:focus,
.company-form-grid textarea:focus,
.company-form-grid select:focus {
    background: var(--company-field-focus);
    border-color: color-mix(in srgb, var(--app-primary) 42%, var(--company-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 10%, transparent);
}

.company-form-grid select option {
    background: #111827;
    color: #f8fafc;
}

.company-color-input {
    height: 44px;
    padding: 4px !important;
    cursor: pointer;
}

.company-form-grid input[type="file"] {
    min-height: 48px;
    padding: 9px;
    cursor: pointer;
}

.company-form-grid input[type="file"]::file-selector-button {
    height: 30px;
    margin-right: 12px;
    border: 0;
    border-radius: 10px;
    padding: 0 12px;
    background: var(--app-primary);
    color: #ffffff;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.company-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--company-border);
    border-radius: 16px;
    background: var(--company-card-strong);
}

.company-toggle-row input {
    width: auto;
    min-height: auto;
    accent-color: var(--app-primary);
}

.company-toggle-row label {
    margin: 0;
    color: var(--text);
    font-size: .84rem;
    font-weight: 700;
}

.company-primary-btn,
.company-outline-btn,
.company-danger-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0 16px;
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
    transition: .18s ease;
    text-transform: uppercase;
}

.company-primary-btn {
    margin-top: 18px;
    background: var(--app-primary);
    border-color: var(--app-primary);
    color: #ffffff;
}

.company-outline-btn {
    background: var(--company-field);
    color: var(--text);
    border-color: var(--company-border);
}

.company-danger-btn {
    background: color-mix(in srgb, #ef4444 8%, transparent);
    color: #ef4444;
    border-color: color-mix(in srgb, #ef4444 34%, var(--company-border));
}

.company-primary-btn:hover,
.company-outline-btn:hover,
.company-danger-btn:hover {
    transform: translateY(-1px);
}

.company-office-list {
    display: grid;
    gap: 12px;
}

.company-office-card {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--company-border);
    border-radius: 18px;
    background: var(--company-card-strong);
}

.company-office-card h4 {
    margin: 0;
    color: var(--text);
    font-size: .96rem;
    font-weight: 800;
}

.office-tags {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.office-tags span {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--company-border);
    border-radius: 999px;
    padding: 5px 9px;
    background: var(--company-field);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 650;
}

.office-actions {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 122px;
}

.office-actions form,
.office-actions button {
    width: 100%;
}

.company-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 34px;
    border: 1px dashed var(--company-border);
    border-radius: 18px;
    background: var(--company-card-strong);
    text-align: center;
}

.company-empty h5 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
}

.company-location-toggle {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.company-location-toggle label {
    cursor: pointer;
}

.company-location-toggle input {
    display: none;
}

.company-location-toggle span {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    border: 1px solid var(--company-border);
    border-radius: 999px;
    padding: 0 14px;
    background: var(--company-field);
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 700;
}

.company-location-toggle input:checked + span {
    border-color: color-mix(in srgb, var(--app-primary) 42%, var(--company-border));
    background: color-mix(in srgb, var(--app-primary) 10%, var(--company-field));
    color: var(--app-primary);
}

.company-office-map {
    height: 280px;
    border: 1px solid var(--company-border);
    border-radius: 18px;
    overflow: hidden;
    background: var(--company-card-strong);
}

.company-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 10px;
}

.company-map-toolbar .company-map-help {
    flex: 1;
    margin: 0;
    line-height: 1.55;
}

.company-map-location-btn {
    flex: none;
    padding: 9px 13px;
    border: 1px solid var(--company-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--app-primary) 8%, var(--company-card));
    color: var(--app-primary);
    font: inherit;
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
}

.company-map-location-btn:disabled {
    cursor: wait;
    opacity: .58;
}

@media (max-width: 980px) {
    .company-settings-grid {
        grid-template-columns: 1fr;
    }

    .company-settings-hero,
    .company-office-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .company-full-setup-btn {
        width: min(100%, 430px);
    }

    .office-actions {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .company-form-grid {
        grid-template-columns: 1fr;
    }

    .company-map-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .company-map-location-btn {
        width: 100%;
    }
}
.company-form-section-heading{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-left:3px solid var(--app-primary);border-radius:0 14px 14px 0;background:color-mix(in srgb,var(--app-primary) 6%,var(--surface))}.company-form-section-heading strong{color:var(--text);font-size:.88rem}.company-form-section-heading small{color:var(--text-muted);font-size:.72rem;line-height:1.55}

/* Structured settings workspace */
.company-settings-grid{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)}.company-settings-grid>#company-profile{grid-column:1/-1}.company-office-register{align-self:start;max-height:850px;overflow:auto}
.company-hero-tools{width:min(100%,510px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:10px}.company-storage-card{min-width:0;display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--company-border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.company-storage-card>div{display:grid;gap:1px;min-width:0}.company-storage-card small{color:var(--text-muted);font-size:.57rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.company-storage-card strong{color:var(--text);font-size:1.05rem;font-weight:900;letter-spacing:-.025em}.company-storage-card div>span{overflow:hidden;color:var(--text-muted);font-size:.59rem;text-overflow:ellipsis;white-space:nowrap}.company-storage-orbit{position:relative;width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border:1px solid color-mix(in srgb,var(--app-primary) 28%,var(--company-border));border-radius:50%;background:color-mix(in srgb,var(--app-primary) 7%,var(--surface-2))}.company-storage-orbit:before,.company-storage-orbit:after{content:"";position:absolute;border:1px solid color-mix(in srgb,var(--app-primary) 24%,transparent);border-radius:50%}.company-storage-orbit:before{inset:6px}.company-storage-orbit:after{inset:12px}.company-storage-orbit i{width:5px;height:5px;border-radius:50%;background:var(--app-primary);box-shadow:0 0 10px var(--app-primary)}.company-storage-card.sql .company-storage-orbit{border-radius:12px}.company-storage-card.sql .company-storage-orbit:before{inset:7px 5px;border-radius:50%}.company-storage-card.sql .company-storage-orbit:after{inset:14px 5px 5px;border-radius:50%}.company-hero-tools .company-full-setup-btn{grid-column:1/-1;min-width:0}
.company-settings-map{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;border:1px solid var(--company-border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.company-settings-map a{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;align-items:center;padding:13px 14px;border-left:1px solid var(--company-border);color:var(--text);text-decoration:none;transition:.18s ease}.company-settings-map a:first-child{border-left:0}.company-settings-map a:hover{background:color-mix(in srgb,var(--app-primary) 5%,var(--surface))}.company-settings-map a>span{grid-row:1/span 2;width:29px;height:29px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--app-primary) 22%,var(--company-border));border-radius:9px;background:color-mix(in srgb,var(--app-primary) 7%,var(--surface-2));color:var(--app-primary);font-size:.55rem;font-weight:900}.company-settings-map strong{overflow:hidden;font-size:.66rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.company-settings-map small{overflow:hidden;color:var(--text-muted);font-size:.55rem;text-overflow:ellipsis;white-space:nowrap}
.company-config-zone{display:grid;gap:15px;padding:0 0 20px;margin:0 0 20px;border-bottom:1px solid var(--company-border);scroll-margin-top:100px}.company-config-zone:last-of-type{margin-bottom:0}.company-zone-head{position:relative;display:flex;align-items:flex-start;gap:13px}.company-zone-head>span{min-width:118px;padding-top:3px;color:var(--app-primary);font-size:.57rem;font-weight:900;letter-spacing:.075em;text-transform:uppercase}.company-zone-head>div:not(.company-color-preview){display:grid;gap:3px;min-width:0}.company-zone-head h3{margin:0;color:var(--text);font-size:.94rem;font-weight:900}.company-zone-head p{margin:0;color:var(--text-muted);font-size:.66rem;line-height:1.5}.company-zone-head .company-color-preview{margin-left:auto}
.company-filing-zone{position:relative;padding:18px;margin-inline:-2px;border:1px solid color-mix(in srgb,#b7791f 24%,var(--company-border));border-radius:17px;background:linear-gradient(120deg,color-mix(in srgb,#b7791f 5%,var(--surface)),var(--surface));box-shadow:inset 3px 0 0 color-mix(in srgb,#b7791f 75%,var(--app-primary))}.company-filing-zone .company-zone-head>span{color:#9a6700}.company-filing-notice{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid color-mix(in srgb,#b7791f 20%,var(--company-border));border-radius:12px;background:color-mix(in srgb,#b7791f 5%,var(--surface-2))}.company-filing-notice>i{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#b7791f;box-shadow:0 0 0 5px color-mix(in srgb,#b7791f 11%,transparent)}.company-filing-notice>span{display:grid;gap:2px}.company-filing-notice strong{color:var(--text);font-size:.65rem}.company-filing-notice small{color:var(--text-muted);font-size:.59rem}.company-three-columns{grid-template-columns:repeat(3,minmax(0,1fr))}
.company-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.company-switch-card{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 11px;margin:0!important;padding:14px;border:1px solid var(--company-border);border-radius:15px;background:var(--company-card-strong);cursor:pointer}.company-switch-card>input{position:absolute;opacity:0;pointer-events:none}.company-switch-ui{grid-row:1/span 2;width:39px;height:22px;padding:3px;border:1px solid var(--company-border);border-radius:999px;background:var(--surface);transition:.18s}.company-switch-ui i{width:14px;height:14px;display:block;border-radius:50%;background:var(--text-muted);transition:.18s}.company-switch-card>input:checked+.company-switch-ui{border-color:var(--app-primary);background:color-mix(in srgb,var(--app-primary) 16%,var(--surface))}.company-switch-card>input:checked+.company-switch-ui i{background:var(--app-primary);transform:translateX(17px);box-shadow:0 0 10px color-mix(in srgb,var(--app-primary) 45%,transparent)}.company-switch-card>input:focus-visible+.company-switch-ui{outline:3px solid color-mix(in srgb,var(--app-primary) 16%,transparent);outline-offset:2px}.company-switch-card>span:last-child{display:grid;gap:4px}.company-switch-card strong{color:var(--text);font-size:.7rem}.company-switch-card small{color:var(--text-muted);font-size:.6rem;line-height:1.5}
.company-form-save{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 15px;border:1px solid color-mix(in srgb,var(--app-primary) 20%,var(--company-border));border-radius:15px;background:color-mix(in srgb,var(--app-primary) 5%,var(--surface-2))}.company-form-save>span{display:grid;gap:2px}.company-form-save strong{color:var(--text);font-size:.69rem}.company-form-save small{color:var(--text-muted);font-size:.6rem}.company-form-save .company-primary-btn{margin:0;white-space:nowrap}
@media(max-width:980px){.company-hero-tools{width:100%}.company-settings-map{grid-template-columns:repeat(3,minmax(0,1fr))}.company-settings-map a:nth-child(4){border-left:0;border-top:1px solid var(--company-border)}.company-settings-map a:nth-child(5){border-top:1px solid var(--company-border)}}
@media(max-width:680px){.company-hero-tools{grid-template-columns:1fr}.company-storage-card,.company-full-setup-btn{width:100%;min-width:0}.company-hero-tools .company-full-setup-btn{grid-column:auto}.company-settings-map{grid-template-columns:1fr 1fr}.company-settings-map a{border-top:1px solid var(--company-border)}.company-settings-map a:nth-child(1),.company-settings-map a:nth-child(2){border-top:0}.company-settings-map a:nth-child(odd){border-left:0}.company-settings-map a:nth-child(4){border-left:1px solid var(--company-border)}.company-settings-map a:nth-child(5){grid-column:1/-1}.company-three-columns{grid-template-columns:1fr}.company-zone-head{display:grid}.company-zone-head>span{min-width:0}.company-zone-head .company-color-preview{position:absolute;right:0}.company-filing-zone{padding:15px}.company-control-grid{grid-template-columns:1fr}.company-form-save{align-items:stretch;flex-direction:column}.company-form-save button{width:100%}}

/* Keep the structured desktop layout from overriding the office workspace on tablets. */
@media (max-width: 980px) {
    .company-settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .company-settings-grid > *,
    #office-setup,
    .company-office-register {
        min-width: 0;
    }

    .company-office-register {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 680px) {
    .company-settings-page {
        gap: 16px;
    }

    .company-panel {
        padding: 16px;
        border-radius: 18px;
    }

    #office-setup .company-panel-header,
    .company-office-register .company-panel-header {
        margin-bottom: 14px;
    }

    #office-setup .company-form-grid > * {
        min-width: 0;
    }

    .company-location-toggle {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .company-location-toggle label,
    .company-location-toggle span {
        width: 100%;
    }

    .company-location-toggle span {
        justify-content: center;
        min-height: 42px;
        padding-inline: 10px;
        text-align: center;
    }

    .company-office-map {
        width: 100%;
        height: clamp(260px, 72vw, 340px);
        border-radius: 15px;
    }

    .company-map-toolbar {
        gap: 10px;
    }

    .company-map-toolbar .company-map-help {
        padding-inline: 2px;
        font-size: .76rem;
        overflow-wrap: anywhere;
    }

    .company-map-location-btn {
        min-height: 42px;
        border-radius: 12px;
        font-size: .76rem;
    }

    #office-setup input,
    #office-setup textarea {
        min-width: 0;
        font-size: 16px;
    }

    #office-setup > form > .company-primary-btn {
        width: 100%;
    }

    .company-toggle-row {
        min-height: 46px;
    }

    .company-office-card {
        width: 100%;
        gap: 14px;
        padding: 15px;
    }

    .company-office-card > div:first-child {
        width: 100%;
        min-width: 0;
    }

    .company-office-card p,
    .company-office-card small {
        overflow-wrap: anywhere;
    }

    .office-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        min-width: 0;
    }

    .office-actions form,
    .office-actions button {
        min-width: 0;
    }
}

@media (max-width: 390px) {
    .company-location-toggle,
    .office-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}