/* =========================================================
   KEEPINTOUCH — REFINED DARK UI
   ========================================================= */

:root {
    color-scheme: dark;

    --bg: #090b10;
    --bg-soft: #0d1017;

    --surface: #12161f;
    --surface-2: #171c27;
    --surface-3: #1c2230;

    --border: rgba(255,255,255,.075);
    --border-strong: rgba(255,255,255,.11);

    --text: #f7f8fc;
    --muted: #929bad;
    --muted-2: #6f788a;

    --purple: #7667f7;
    --purple-bright: #9185ff;
    --purple-soft: rgba(118,103,247,.14);

    --green: #22c55e;
    --green-soft: rgba(34,197,94,.13);

    --yellow: #f4b942;
    --yellow-soft: rgba(244,185,66,.13);

    --red: #fb7185;
    --red-soft: rgba(251,113,133,.13);

    --shadow:
        0 16px 45px rgba(0,0,0,.28);
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
    background: var(--bg) !important;
}


body,
body.page-add,
body.page-calendar,
body.page-settings {
    background:
        radial-gradient(
            circle at 92% -5%,
            rgba(118,103,247,.12),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #090b10 0%,
            #0b0f17 100%
        ) !important;

    background-attachment: fixed !important;

    color: var(--text) !important;
}


main,
.container,
.page,
.page-shell,
.app-shell,
.dashboard-page,
.people-page,
.settings-page,
.form-page,
.calendar-page {
    background: transparent !important;
}


h1,
h2,
h3 {
    color: var(--text) !important;
}


p {
    color: var(--muted);
}


/* =========================================================
   PAGE HEADERS
   ========================================================= */

.page-eyebrow,
.calendar-eyebrow {
    color: var(--purple-bright) !important;

    letter-spacing: .18em !important;

    font-weight: 850 !important;
}


.form-header h1,
.calendar-header h1,
.settings-page h1,
body.page-settings h1 {
    color: #fff !important;

    letter-spacing: -.045em !important;
}


@media (max-width: 650px) {

    .form-header h1,
    .calendar-header h1 {
        font-size: 48px !important;
    }

}


/* =========================================================
   CARD SYSTEM
   ========================================================= */

.card,
.panel,
.stat-card,
.summary-card,
.dashboard-card,
.person-card,
.people-card,
.settings-card,
.settings-section,
.settings-panel,
.form-card,
.calendar-shell,
.calendar-card,
.calendar-tip {
    background:
        linear-gradient(
            145deg,
            var(--surface-2),
            var(--surface)
        ) !important;

    border: 1px solid var(--border) !important;

    box-shadow: var(--shadow) !important;
}


.stat-card,
.summary-card,
.dashboard-card {
    border-radius: 22px !important;
}


.person-card,
.people-card {
    border-radius: 24px !important;
}


/* soften borders instead of blue outlines everywhere */

.form-card,
.settings-card,
.settings-section,
.settings-panel,
.calendar-shell,
.calendar-tip {
    border-color: var(--border) !important;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.stat-number,
.stat-value,
.metric-value,
.count {
    color: #fff !important;

    font-weight: 850 !important;
}


.stat-label,
.metric-label {
    color: var(--muted) !important;
}


.stat-card {
    min-height: 150px;

    background:
        linear-gradient(
            160deg,
            #171c26,
            #11151d
        ) !important;
}


.stat-card:hover {
    background:
        linear-gradient(
            160deg,
            #1a202c,
            #131821
        ) !important;
}


/* =========================================================
   PEOPLE
   ========================================================= */

.person-name,
.people-name,
.contact-name {
    color: white !important;
}


.person-meta {
    color: var(--muted) !important;
}


.on-track,
.status-on-track,
.badge-success {
    background: var(--green-soft) !important;

    color: #63da8c !important;
}


.needs-attention,
.status-warning,
.badge-warning {
    background: var(--yellow-soft) !important;

    color: #f4c657 !important;
}


.overdue,
.status-overdue,
.badge-danger {
    background: var(--red-soft) !important;

    color: #ff91a1 !important;
}


/* =========================================================
   FORM / ADD PERSON
   ========================================================= */

.form-page {
    max-width: 720px !important;
}


.form-card {
    border-radius: 24px !important;

    background:
        linear-gradient(
            145deg,
            #141923,
            #10141c
        ) !important;

    box-shadow:
        0 14px 38px rgba(0,0,0,.22) !important;
}


.form-card-icon {
    background: var(--purple-soft) !important;

    color: var(--purple-bright) !important;
}


.form-card-heading p {
    color: var(--muted) !important;
}


label {
    color: #e7eaf2 !important;
}


.optional {
    color: var(--muted-2) !important;
}


input,
select,
textarea {
    background: #0f141d !important;

    color: #f7f8fc !important;

    border:
        1px solid
        var(--border-strong) !important;

    box-shadow: none !important;
}


input::placeholder,
textarea::placeholder {
    color: #697386 !important;
}


input:focus,
select:focus,
textarea:focus {
    border-color:
        rgba(145,133,255,.65) !important;

    outline:
        3px solid
        rgba(118,103,247,.10) !important;
}


.choice-card {
    background: #10151e !important;

    border:
        1px solid
        var(--border) !important;
}


.choice-option input:checked + .choice-card {
    background:
        linear-gradient(
            145deg,
            rgba(34,197,94,.10),
            #10161a
        ) !important;

    border-color:
        rgba(34,197,94,.32) !important;

    box-shadow: none !important;
}


.form-submit-area {
    position: static !important;

    margin-top: 4px !important;

    padding-bottom: 12px !important;
}


.form-primary-button {
    border-radius: 18px !important;

    min-height: 60px !important;

    background:
        linear-gradient(
            135deg,
            #26c763,
            #19a74e
        ) !important;

    box-shadow:
        0 12px 30px
        rgba(34,197,94,.22) !important;
}


/* =========================================================
   SETTINGS
   ========================================================= */

.settings-page .card,
body.page-settings .card,
.settings-card,
.settings-section {
    background:
        linear-gradient(
            145deg,
            #151a24,
            #10141c
        ) !important;

    border-radius: 24px !important;
}


.settings-page select,
body.page-settings select {
    background: #0f141d !important;
}


.day,
.day-option,
.weekday,
.weekday-option {
    background: #10151e !important;

    border:
        1px solid
        var(--border) !important;

    color: #9da6b8 !important;

    box-shadow: none !important;
}


.day:has(input:checked),
.day-option:has(input:checked),
.weekday:has(input:checked),
.weekday-option:has(input:checked) {
    background:
        var(--purple-soft) !important;

    border-color:
        rgba(118,103,247,.45) !important;

    color:
        #aaa1ff !important;
}


/* =========================================================
   CALENDAR SHELL
   ========================================================= */

.calendar-tip {
    background:
        linear-gradient(
            145deg,
            #131823,
            #10141c
        ) !important;

    box-shadow: none !important;
}


.calendar-tip-icon {
    background:
        var(--purple-soft) !important;

    color:
        var(--purple-bright) !important;
}


.calendar-shell {
    background:
        linear-gradient(
            160deg,
            #131823,
            #0f131b
        ) !important;

    border-radius: 26px !important;

    padding: 18px !important;
}


.calendar-title {
    color: white !important;
}


.pinch-hint {
    color: var(--muted) !important;
}


/* toolbar */

.toolbar-button {
    background:
        #171c27 !important;

    border:
        1px solid
        var(--border) !important;

    color:
        #dbe0eb !important;

    box-shadow: none !important;
}


.toolbar-button.active {
    background:
        linear-gradient(
            135deg,
            #7969ff,
            #5e50eb
        ) !important;

    color:
        white !important;

    border-color:
        transparent !important;
}


/* =========================================================
   FULLCALENDAR WEEK
   ========================================================= */

.fc {
    color: var(--text) !important;

    --fc-border-color:
        rgba(255,255,255,.06);

    --fc-page-bg-color:
        transparent;

    --fc-neutral-bg-color:
        transparent;

    --fc-list-event-hover-bg-color:
        transparent;
}


.fc .fc-list {
    border: 0 !important;
}


.fc .fc-list-table {
    border-collapse: separate !important;

    border-spacing: 0 10px !important;
}


/* Day header */

.fc .fc-list-day > th {
    border: 0 !important;

    padding:
        10px
        0
        4px !important;
}


.fc .fc-list-day-cushion {
    display: flex !important;

    align-items: center !important;

    padding:
        10px
        4px !important;

    background:
        transparent !important;

    border:
        0 !important;
}


.fc .fc-list-day-text {
    color:
        #e9ebf3 !important;

    font-size:
        16px !important;

    font-weight:
        800 !important;

    text-decoration:
        none !important;
}


.fc .fc-list-day-side-text {
    display: none !important;
}


/* Event */

.fc .fc-list-event td {
    background:
        #171c26 !important;

    border:
        0 !important;

    padding:
        0 !important;
}


.fc .fc-list-event td:first-child {
    border-radius:
        18px
        0
        0
        18px !important;
}


.fc .fc-list-event td:last-child {
    border-radius:
        0
        18px
        18px
        0 !important;
}


.fc .fc-list-event-time,
.fc .fc-list-event-graphic {
    display:
        none !important;
}


.fc .fc-list-event-title {
    padding:
        0 !important;
}


.kit-call-row {
    min-height: 74px;

    width: 100%;

    display: grid;

    grid-template-columns:
        82px
        minmax(0,1fr)
        26px;

    gap: 14px;

    align-items: center;

    padding:
        13px
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #191f2b,
            #141922
        );

    box-shadow:
        0 8px 22px
        rgba(0,0,0,.16);
}


.kit-call-time {
    color:
        var(--purple-bright);

    font-size:
        15px;

    font-weight:
        850;

    white-space:
        nowrap;
}


.kit-call-main {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}


.kit-call-name {
    color:
        white;

    font-size:
        18px;

    font-weight:
        850;

    line-height:
        1.15;

    overflow: hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.kit-call-meta {
    color:
        var(--muted);

    font-size:
        13px;

    line-height:
        1.2;
}


.kit-call-arrow {
    color:
        #687286;

    font-size:
        28px;

    line-height:
        1;

    text-align:
        right;
}


/* =========================================================
   MONTH
   ========================================================= */

.fc .fc-scrollgrid {
    border:
        1px solid
        var(--border) !important;

    border-radius:
        18px !important;

    overflow:
        hidden !important;
}


.fc .fc-col-header-cell {
    background:
        #121720 !important;
}


.fc .fc-col-header-cell-cushion {
    color:
        #8f98aa !important;
}


.fc .fc-daygrid-day {
    background:
        #10141c !important;
}


.fc .fc-day-today {
    background:
        rgba(118,103,247,.10) !important;
}


.fc .fc-daygrid-day-number {
    color:
        #dfe3ec !important;
}


.fc .fc-daygrid-event {
    background:
        var(--purple) !important;

    border:
        0 !important;

    color:
        white !important;
}


/* =========================================================
   BOTTOM NAV
   ========================================================= */

nav,
.bottom-nav,
.mobile-nav,
.app-nav,
.nav-bar,
.nav-shell,
.navigation {
    background:
        rgba(14,18,26,.92) !important;

    border:
        1px solid
        var(--border) !important;

    box-shadow:
        0 15px 42px
        rgba(0,0,0,.38) !important;

    backdrop-filter:
        blur(20px) !important;

    -webkit-backdrop-filter:
        blur(20px) !important;
}


nav a,
.bottom-nav a,
.mobile-nav a,
.app-nav a,
.nav-item,
.nav-link {
    color:
        #778196 !important;
}


nav a.active,
.bottom-nav a.active,
.mobile-nav a.active,
.app-nav a.active,
.nav-item.active,
.nav-link.active,
[aria-current="page"] {
    background:
        var(--purple-soft) !important;

    color:
        var(--purple-bright) !important;

    box-shadow:
        none !important;
}


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

@media (max-width: 650px) {

    .calendar-shell {
        padding:
            14px !important;
    }


    .kit-call-row {
        grid-template-columns:
            73px
            minmax(0,1fr)
            18px;

        gap:
            10px;

        padding:
            13px
            12px;
    }


    .kit-call-time {
        font-size:
            14px;
    }


    .kit-call-name {
        font-size:
            17px;
    }

}


/* ---------- MULTI-USER AUTH ---------- */
.auth-page {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top, rgba(108,91,246,.16), transparent 34rem),
        #080e1d;
    color: #f4f5fa;
}

.auth-shell {
    width: min(100%, 430px);
    text-align: center;
}

.auth-shell-wide { width: min(100%, 560px); }
.auth-logo { font-size: 42px; margin-bottom: 10px; }
.auth-shell h1 { margin: 0; font-size: 36px; letter-spacing: -.04em; }
.auth-subtitle { color: #8e96aa; line-height: 1.5; margin: 10px 0 22px; }

.auth-card,
.account-card {
    padding: 22px;
    border: 1px solid rgba(148,158,184,.16);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(24,29,42,.98), rgba(15,19,30,.98));
    box-shadow: 0 22px 60px rgba(0,0,0,.25);
    text-align: left;
}

.auth-card label,
.account-card label {
    display: block;
    margin: 14px 0 7px;
    color: #e8eaf1;
    font-size: 13px;
    font-weight: 800;
}

.auth-card input,
.auth-card select,
.account-card input {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid rgba(148,158,184,.20);
    border-radius: 14px;
    outline: none;
    background: #0e121c;
    color: #f4f5fa;
    font: inherit;
}

.auth-card input:focus,
.auth-card select:focus,
.account-card input:focus {
    border-color: #7564f6;
    box-shadow: 0 0 0 3px rgba(112,92,246,.11);
}

.auth-card button,
.account-card button {
    width: 100%;
    min-height: 52px;
    margin-top: 20px;
    border: 0;
    border-radius: 14px;
    background: #6c5bf6;
    color: white;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.auth-note { color: #697186; font-size: 12px; line-height: 1.5; }
.auth-message { margin: 0 0 14px; padding: 12px 14px; border-radius: 13px; font-size: 13px; }
.auth-error { background: rgba(220,38,38,.13); color: #fca5a5; border: 1px solid rgba(248,113,113,.2); }
.auth-success { background: rgba(22,163,74,.13); color: #86efac; border: 1px solid rgba(74,222,128,.2); }

.setup-account + .setup-account {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(148,158,184,.12);
}
.setup-account strong { display: block; font-size: 17px; }
.setup-account span { display: block; color: #7d8598; font-size: 12px; margin-top: 3px; }

.account-strip {
    max-width: 1180px;
    margin: 0 auto 10px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #798196;
    font-size: 12px;
}
.account-strip strong { color: #dfe2eb; }
.account-strip-actions { display: flex; align-items: center; gap: 12px; }
.account-strip-actions form { margin: 0; }
.account-strip-actions a,
.account-strip-actions button {
    border: 0;
    padding: 0;
    background: transparent;
    color: #9b8dff;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.account-card { max-width: 560px; }

@media (max-width: 640px) {
    .account-strip { padding: 7px 10px; }
    .auth-page { padding: 18px; }
}

/* ---------- SELF-SERVICE ACCOUNTS ---------- */
.auth-secondary-link {
    display: inline-block;
    margin: 16px 0 4px;
    color: #9b8dff;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
}
.auth-secondary-link:hover { text-decoration: underline; }