/* ==========================================================================
   PABLOS CRM — FUTURE LUXURY UI
   Pablos Real Estate
   ========================================================================== */

:root {
    --navy-950: #071321;
    --navy-900: #0b1829;
    --navy: #0F1B2D;
    --navy-700: #173451;
    --navy-600: #1E4F7A;

    --blue: #6EC1FF;
    --blue-strong: #3EA6F5;
    --blue-soft: #DFF1FF;
    --blue-glow: rgba(110, 193, 255, .32);

    --ice: #F4F8FF;
    --ice-2: #EEF5FF;
    --ice-3: #E7F1FC;

    --gold: #D4AF37;
    --gold-light: #F0D77E;
    --gold-soft: rgba(212, 175, 55, .14);

    --white: #FFFFFF;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);

    --text: #162338;
    --muted: #718096;
    --muted-2: #9AA8B8;

    --line: rgba(15, 27, 45, .09);
    --line-blue: rgba(110, 193, 255, .25);

    --success: #177245;
    --success-bg: #E7F8EE;

    --warning: #946200;
    --warning-bg: #FFF5D7;

    --danger: #B42318;
    --danger-bg: #FDECEA;

    --shadow-xs:
        0 1px 2px rgba(15, 27, 45, .03);

    --shadow-sm:
        0 4px 14px rgba(15, 27, 45, .055);

    --shadow:
        0 12px 34px rgba(15, 27, 45, .075);

    --shadow-lg:
        0 22px 60px rgba(15, 27, 45, .11);

    --glow-blue:
        0 0 0 1px rgba(110, 193, 255, .10),
        0 10px 32px rgba(110, 193, 255, .16);

    --radius-sm: 9px;
    --radius: 12px;
    --radius-lg: 17px;
    --radius-xl: 22px;

    --ease:
        cubic-bezier(.22, .61, .36, 1);

    --transition:
        180ms var(--ease);
}


/* ==========================================================================
   RESET
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(110, 193, 255, .11),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 100%,
            rgba(212, 175, 55, .05),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #F9FBFE 0%,
            #F3F7FC 48%,
            #EEF5FF 100%
        );

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}


/* ==========================================================================
   SELECTION + SCROLLBAR
   ========================================================================== */

::selection {
    background: rgba(110, 193, 255, .30);
    color: var(--navy);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(15, 27, 45, .15);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(30, 79, 122, .35);
    border: 3px solid transparent;
    background-clip: padding-box;
}


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

@keyframes pablosFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pablosFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pablosGlow {
    0%,
    100% {
        opacity: .35;
    }

    50% {
        opacity: .7;
    }
}

@keyframes pablosShimmer {
    from {
        transform: translateX(-150%) skewX(-18deg);
    }

    to {
        transform: translateX(250%) skewX(-18deg);
    }
}


/* ==========================================================================
   MAIN APP SHELL
   ========================================================================== */

.app-shell {
    display: flex;
    min-height: 100vh;
}

.main-wrap {
    margin-left: 252px;
    width: calc(100% - 252px);
    min-height: 100vh;
    position: relative;
}

.main-wrap::before {
    content: "";
    position: fixed;
    top: 72px;
    right: 0;
    bottom: 0;
    width: 1px;

    background:
        linear-gradient(
            transparent,
            rgba(110, 193, 255, .28),
            transparent
        );

    pointer-events: none;
    z-index: 0;
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar {
    width: 252px;
    color: #fff;

    padding: 20px 15px 18px;

    position: fixed;
    inset: 0 auto 0 0;

    z-index: 20;

    overflow-y: auto;
    overflow-x: hidden;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(110, 193, 255, .13),
            transparent 30%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(212, 175, 55, .08),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #071321 0%,
            #0B1A2D 48%,
            #081726 100%
        );

    box-shadow:
        18px 0 50px rgba(7, 19, 33, .10);

    border-right:
        1px solid rgba(110, 193, 255, .08);
}

.sidebar::before {
    content: "";
    position: absolute;

    inset: 0 0 auto 0;

    height: 130px;

    background:
        linear-gradient(
            180deg,
            rgba(110, 193, 255, .06),
            transparent
        );

    pointer-events: none;
}

.sidebar::after {
    content: "";
    position: absolute;

    top: 0;
    right: 0;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            transparent,
            rgba(110, 193, 255, .45),
            rgba(212, 175, 55, .18),
            transparent
        );

    opacity: .45;
    pointer-events: none;
}


/* ==========================================================================
   SIDEBAR BRAND
   ========================================================================== */

.sidebar-brand {
    position: relative;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 4px 8px 20px;

    margin-bottom: 15px;

    border-bottom:
        1px solid rgba(255, 255, 255, .085);
}

.sidebar-brand.has-real-logo {
    display: grid;

    gap: 8px;

    padding: 4px 5px 19px;

    justify-items: stretch;
}

.sidebar-logo-surface {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 70px;

    padding: 9px 10px;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .99),
            rgba(242, 248, 255, .94)
        );

    border:
        1px solid rgba(255, 255, 255, .82);

    box-shadow:
        0 13px 30px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .95);

    position: relative;

    overflow: hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.sidebar-logo-surface::before {
    content: "";

    position: absolute;

    width: 42px;
    height: 180%;

    left: -80px;
    top: -30%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(110, 193, 255, .18),
            transparent
        );

    transform: rotate(18deg);

    animation:
        pablosShimmer 8s ease-in-out infinite;
}

.sidebar-logo-surface:hover {
    transform: translateY(-1px);

    box-shadow:
        0 16px 36px rgba(0, 0, 0, .22),
        0 0 24px rgba(110, 193, 255, .08);
}

.sidebar-brand img,
.sidebar-brand.has-real-logo img {
    display: block;

    width: 100%;

    max-width: 190px;
    max-height: 64px;

    object-fit: contain;

    position: relative;

    z-index: 1;
}

.sidebar-crm-label {
    display: block;

    text-align: center;

    color: #91A6BD;

    letter-spacing: 3.8px;

    font-size: 9px;

    font-weight: 750;

    text-transform: uppercase;
}

.mini-mark,
.brand-mark {
    display: grid;
    place-items: center;

    background: #fff;

    color: var(--navy);

    font-weight: 800;

    border-radius: 12px;
}

.mini-mark {
    width: 38px;
    height: 38px;
}

.sidebar-brand b {
    display: block;
    letter-spacing: 1.8px;
}

.sidebar-brand small {
    display: block;

    color: #9FB0C5;

    letter-spacing: 2px;

    font-size: 10px;
}


/* ==========================================================================
   SIDEBAR NAVIGATION
   ========================================================================== */

.sidebar nav {
    display: grid;
    gap: 5px;

    position: relative;
    z-index: 1;
}

.sidebar nav a {
    min-height: 43px;

    padding: 10px 12px;

    border-radius: 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #D4DFEA;

    position: relative;

    overflow: hidden;

    border:
        1px solid transparent;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.sidebar nav a::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 0;

    border-radius: 0 6px 6px 0;

    background:
        linear-gradient(
            180deg,
            var(--blue),
            var(--gold)
        );

    box-shadow:
        0 0 14px rgba(110, 193, 255, .6);

    transform: translateY(-50%);

    transition:
        height var(--transition);
}

.sidebar nav a::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            100deg,
            transparent 0%,
            rgba(110, 193, 255, .08) 55%,
            transparent 100%
        );

    opacity: 0;

    transition:
        opacity var(--transition);
}

.sidebar nav a:hover {
    color: #fff;

    background:
        rgba(110, 193, 255, .085);

    border-color:
        rgba(110, 193, 255, .12);

    transform:
        translateX(2px);

    box-shadow:
        inset 0 0 18px rgba(110, 193, 255, .035);
}

.sidebar nav a:hover::before {
    height: 54%;
}

.sidebar nav a:hover::after {
    opacity: 1;
}

.sidebar nav a.active,
.sidebar nav a[aria-current="page"] {
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(62, 166, 245, .20),
            rgba(110, 193, 255, .08)
        );

    border-color:
        rgba(110, 193, 255, .19);

    box-shadow:
        inset 0 0 28px rgba(110, 193, 255, .045),
        0 7px 22px rgba(0, 0, 0, .08);
}

.sidebar nav a.active::before,
.sidebar nav a[aria-current="page"]::before {
    height: 63%;
}

.sidebar nav a:active {
    transform:
        translateX(2px)
        scale(.985);
}


/* ==========================================================================
   TOP BAR
   ========================================================================== */

.topbar {
    height: 72px;

    background:
        rgba(255, 255, 255, .78);

    backdrop-filter:
        blur(18px) saturate(150%);

    -webkit-backdrop-filter:
        blur(18px) saturate(150%);

    border-bottom:
        1px solid rgba(15, 27, 45, .07);

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 0 27px;

    position: sticky;

    top: 0;

    z-index: 10;

    box-shadow:
        0 6px 22px rgba(15, 27, 45, .025);
}


/* ==========================================================================
   BACK BUTTON
   ========================================================================== */

.top-back {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    border:
        1px solid rgba(15, 27, 45, .09);

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F5F9FE
        );

    color: var(--navy);

    font-size: 21px;

    line-height: 1;

    display: grid;
    place-items: center;

    box-shadow:
        var(--shadow-xs);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.top-back:hover {
    background:
        linear-gradient(
            145deg,
            #F7FBFF,
            #EAF5FF
        );

    border-color:
        rgba(110, 193, 255, .50);

    transform:
        translateX(-2px);

    box-shadow:
        var(--glow-blue);
}

.top-back:active {
    transform:
        translateX(-2px)
        scale(.94);
}


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

.global-search {
    flex: 1;

    max-width: 660px;

    display: flex;

    border:
        1px solid rgba(15, 27, 45, .08);

    border-radius: 13px;

    overflow: hidden;

    background:
        rgba(248, 251, 255, .88);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 4px 14px rgba(15, 27, 45, .025);

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.global-search:focus-within {
    border-color:
        rgba(110, 193, 255, .65);

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(110, 193, 255, .10),
        0 10px 28px rgba(15, 27, 45, .055);
}

.global-search input {
    flex: 1;

    border: 0;

    background: transparent;

    padding: 11px 14px;

    outline: none;

    color: var(--text);
}

.global-search input::placeholder {
    color: #94A2B3;
}

.global-search button {
    border: 0;

    background: transparent;

    padding: 0 15px;

    color: var(--navy);

    transition:
        color var(--transition),
        background var(--transition);
}

.global-search button:hover {
    color: var(--navy-600);

    background:
        rgba(110, 193, 255, .08);
}


/* ==========================================================================
   TOP ACTIONS
   ========================================================================== */

.top-actions {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 13px;
}

.language-switch {
    display: flex;
    align-items: center;

    gap: 5px;

    font-size: 12px;
    font-weight: 750;

    padding: 6px;

    border-radius: 10px;

    background:
        rgba(244, 248, 255, .8);
}

.language-switch a {
    color: #8A96A6;

    border-radius: 7px;

    padding: 4px 7px;

    transition:
        color var(--transition),
        background var(--transition);
}

.language-switch a:hover {
    color: var(--navy);
}

.language-switch a.active {
    color: var(--navy);

    background: #fff;

    box-shadow:
        0 2px 8px rgba(15, 27, 45, .07);
}

.user-chip {
    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 13px;
}

.avatar {
    width: 36px;
    height: 36px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    font-weight: 800;

    color: var(--navy);

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #DDEFFF
        );

    border:
        1px solid rgba(110, 193, 255, .26);

    box-shadow:
        0 6px 16px rgba(30, 79, 122, .10);
}

.link-btn {
    border: 0;

    background: none;

    color: var(--muted);

    transition:
        color var(--transition),
        transform var(--transition);
}

.link-btn:hover {
    color: var(--navy);
}

.link-btn:active {
    transform: scale(.94);
}

.inline {
    display: inline;
}


/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

.content {
    padding: 29px;

    max-width: 1580px;

    margin: 0 auto;

    position: relative;

    z-index: 1;

    animation:
        pablosFadeUp 320ms var(--ease) both;
}

.page-head {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 16px;

    margin-bottom: 22px;
}

.page-head h1 {
    margin: 0;

    font-size:
        clamp(24px, 2vw, 29px);

    letter-spacing: -.65px;

    color: var(--navy);

    font-weight: 760;
}

.page-head p {
    margin: 6px 0 0;

    color: var(--muted);

    line-height: 1.45;
}


/* ==========================================================================
   BUTTON SYSTEM
   ========================================================================== */

.btn {
    border:
        1px solid transparent;

    border-radius: 11px;

    min-height: 40px;

    padding: 9px 15px;

    position: relative;

    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: #fff;

    font-weight: 680;

    letter-spacing: -.05px;

    background:
        linear-gradient(
            135deg,
            #153B5F 0%,
            #0F1B2D 62%,
            #10253D 100%
        );

    box-shadow:
        0 7px 18px rgba(15, 27, 45, .16),
        inset 0 1px 0 rgba(255, 255, 255, .10);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition),
        filter var(--transition);
}

.btn::before {
    content: "";

    position: absolute;

    width: 40px;
    height: 180%;

    top: -40%;

    left: -80px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .20),
            transparent
        );

    transform:
        rotate(14deg);

    transition:
        left 450ms var(--ease);
}

.btn:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 12px 24px rgba(15, 27, 45, .20),
        0 0 0 1px rgba(110, 193, 255, .10),
        0 0 24px rgba(110, 193, 255, .10);

    filter: brightness(1.055);
}

.btn:hover::before {
    left: calc(100% + 40px);
}

.btn:active {
    transform:
        translateY(0)
        scale(.965);

    box-shadow:
        0 3px 9px rgba(15, 27, 45, .15);

    transition-duration: 70ms;
}

.btn:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 4px rgba(110, 193, 255, .22),
        0 8px 24px rgba(15, 27, 45, .16);
}


/* Secondary */

.btn.secondary {
    color: var(--navy);

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F5F9FF
        );

    border-color:
        rgba(30, 79, 122, .12);

    box-shadow:
        0 5px 15px rgba(15, 27, 45, .055);
}

.btn.secondary:hover {
    border-color:
        rgba(110, 193, 255, .45);

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #EAF6FF
        );

    box-shadow:
        0 9px 22px rgba(30, 79, 122, .09),
        0 0 0 3px rgba(110, 193, 255, .06);
}


/* Gold */

.btn.gold {
    color: #17130A;

    background:
        linear-gradient(
            135deg,
            #F0D77E 0%,
            #D4AF37 48%,
            #B98D19 100%
        );

    border-color:
        rgba(117, 85, 10, .08);

    box-shadow:
        0 8px 20px rgba(212, 175, 55, .20),
        inset 0 1px 0 rgba(255, 255, 255, .38);
}

.btn.gold:hover {
    box-shadow:
        0 12px 26px rgba(212, 175, 55, .28),
        0 0 18px rgba(212, 175, 55, .10);
}


/* Danger */

.btn.danger {
    color: var(--danger);

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #FFF7F6
        );

    border-color:
        rgba(180, 35, 24, .17);

    box-shadow:
        0 4px 13px rgba(180, 35, 24, .05);
}

.btn.danger:hover {
    background: #FFF1EF;

    border-color:
        rgba(180, 35, 24, .30);

    box-shadow:
        0 8px 18px rgba(180, 35, 24, .10);
}

.btn.small {
    min-height: 32px;

    padding: 6px 10px;

    font-size: 12px;

    border-radius: 9px;
}


/* ==========================================================================
   GRID
   ========================================================================== */

.grid {
    display: grid;
    gap: 18px;
}

.stats {
    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    margin-bottom: 22px;
}


/* ==========================================================================
   STAT CARDS
   ========================================================================== */

.stat {
    min-height: 108px;

    padding: 18px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(249, 252, 255, .92)
        );

    border:
        1px solid rgba(15, 27, 45, .075);

    border-radius: 16px;

    box-shadow:
        0 7px 22px rgba(15, 27, 45, .05);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.stat::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -35px;
    top: -35px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(110, 193, 255, .14),
            transparent 70%
        );

    pointer-events: none;
}

.stat::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--gold)
        );

    transition:
        width 320ms var(--ease);
}

.stat:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(110, 193, 255, .24);

    box-shadow:
        0 15px 34px rgba(15, 27, 45, .085),
        0 0 24px rgba(110, 193, 255, .045);
}

.stat:hover::after {
    width: 100%;
}

.stat small {
    color: var(--muted);

    display: block;

    margin-bottom: 9px;

    font-weight: 570;
}

.stat strong {
    font-size: 27px;

    letter-spacing: -.7px;

    color: var(--navy);
}

.kpi-danger strong {
    color: var(--danger);
}


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(251, 253, 255, .93)
        );

    border:
        1px solid rgba(15, 27, 45, .075);

    border-radius: 17px;

    box-shadow:
        0 8px 26px rgba(15, 27, 45, .05);

    overflow: hidden;

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.card:hover {
    border-color:
        rgba(110, 193, 255, .17);

    box-shadow:
        0 13px 34px rgba(15, 27, 45, .07);
}

.card-head {
    min-height: 57px;

    padding: 16px 20px;

    border-bottom:
        1px solid rgba(15, 27, 45, .065);

    display: flex;
    align-items: center;
    justify-content: space-between;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .92),
            rgba(248, 251, 255, .72)
        );
}

.card-head h2,
.card-head h3 {
    margin: 0;

    font-size: 16px;

    color: var(--navy);

    letter-spacing: -.2px;
}

.card-body {
    padding: 20px;
}


/* ==========================================================================
   LAYOUTS
   ========================================================================== */

.two-col {
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(300px, .75fr);
}

.three-col {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


/* ==========================================================================
   FILTERS
   ========================================================================== */

.filters {
    background:
        rgba(255, 255, 255, .90);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    border:
        1px solid rgba(15, 27, 45, .075);

    border-radius: 14px;

    padding: 13px;

    display: flex;

    gap: 9px;

    flex-wrap: wrap;

    margin-bottom: 15px;

    box-shadow:
        0 6px 20px rgba(15, 27, 45, .035);
}

.filters input,
.filters select {
    min-width: 130px;

    min-height: 39px;

    border:
        1px solid rgba(15, 27, 45, .11);

    border-radius: 10px;

    padding: 8px 11px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #FAFCFF
        );

    color: var(--text);

    outline: none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.filters input:hover,
.filters select:hover {
    border-color:
        rgba(30, 79, 122, .22);
}

.filters input:focus,
.filters select:focus {
    border-color: var(--blue);

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(110, 193, 255, .11);
}


/* ==========================================================================
   TABLES
   ========================================================================== */

.table-wrap {
    overflow: auto;

    background:
        rgba(255, 255, 255, .94);

    border:
        1px solid rgba(15, 27, 45, .075);

    border-radius: 15px;

    box-shadow:
        0 8px 26px rgba(15, 27, 45, .045);
}

.data-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 760px;
}

.data-table th {
    font-size: 10.5px;

    text-transform: uppercase;

    letter-spacing: .72px;

    text-align: left;

    color: #718095;

    background:
        linear-gradient(
            180deg,
            #FBFDFF,
            #F5F9FE
        );

    padding: 12px 14px;

    border-bottom:
        1px solid rgba(15, 27, 45, .075);

    white-space: nowrap;
}

.data-table td {
    padding: 13px 14px;

    border-bottom:
        1px solid rgba(15, 27, 45, .06);

    vertical-align: middle;

    transition:
        background var(--transition);
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr {
    transition:
        background var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.data-table tbody tr:hover {
    background:
        linear-gradient(
            90deg,
            rgba(110, 193, 255, .055),
            rgba(255, 255, 255, .8)
        );
}


/* ==========================================================================
   TEXT HELPERS
   ========================================================================== */

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

.small-text {
    font-size: 12px;
}

.nowrap {
    white-space: nowrap;
}

.code {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        monospace;

    font-weight: 700;

    color: var(--navy-600);
}


/* ==========================================================================
   BADGES
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 11px;

    font-weight: 720;

    background:
        linear-gradient(
            145deg,
            var(--ice-2),
            #F7FBFF
        );

    color: #35506D;

    border:
        1px solid rgba(110, 193, 255, .12);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7);
}

.badge.active,
.badge.completed {
    background:
        linear-gradient(
            145deg,
            #ECFBF2,
            var(--success-bg)
        );

    color: #216B42;

    border-color:
        rgba(33, 107, 66, .10);
}

.badge.archived,
.badge.inactive,
.badge.cancelled {
    background:
        linear-gradient(
            145deg,
            #F8F9FA,
            #F1F3F6
        );

    color: #667085;

    border-color:
        rgba(102, 112, 133, .10);
}

.badge.reserved,
.badge.pending,
.badge.waiting {
    background:
        linear-gradient(
            145deg,
            #FFF9E9,
            var(--warning-bg)
        );

    color: #875C00;

    border-color:
        rgba(135, 92, 0, .10);
}

.badge.sold,
.badge.rented {
    background:
        linear-gradient(
            145deg,
            #F0F5FF,
            #E6EEFF
        );

    color: #334E9A;

    border-color:
        rgba(51, 78, 154, .10);
}

.badge.overdue {
    background:
        linear-gradient(
            145deg,
            #FFF3F2,
            var(--danger-bg)
        );

    color: var(--danger);

    border-color:
        rgba(180, 35, 24, .10);
}


/* ==========================================================================
   FORMS
   ========================================================================== */

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}

.form-group {
    display: grid;
    gap: 7px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 12px;

    font-weight: 720;

    color: #495D74;

    letter-spacing: .05px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

    border:
        1px solid rgba(15, 27, 45, .12);

    border-radius: 11px;

    padding: 10px 11px;

    min-height: 42px;

    color: var(--text);

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #FAFCFF
        );

    outline: none;

    box-shadow:
        inset 0 1px 2px rgba(15, 27, 45, .025);

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition),
        transform var(--transition);
}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
    border-color:
        rgba(30, 79, 122, .22);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color:
        var(--blue);

    background:
        #FFFFFF;

    box-shadow:
        0 0 0 4px rgba(110, 193, 255, .11),
        0 8px 20px rgba(15, 27, 45, .045);
}

textarea {
    min-height: 105px;

    resize: vertical;
}

.form-actions {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;
}


/* ==========================================================================
   PASSWORD FIELD
   ========================================================================== */

.password-field {
    position: relative;

    width: 100%;
}

.password-field input {
    padding-right: 48px !important;
}

.password-toggle {
    position: absolute;

    right: 6px;
    top: 50%;

    transform:
        translateY(-50%);

    width: 38px;
    height: 38px;

    border: 0;

    border-radius: 9px;

    background:
        transparent;

    color: #66768A;

    display: grid;

    place-items: center;

    padding: 0;

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.password-toggle:hover {
    background:
        rgba(110, 193, 255, .10);

    color:
        var(--navy);
}

.password-toggle:active {
    transform:
        translateY(-50%)
        scale(.9);
}

.password-toggle:focus-visible {
    outline:
        2px solid var(--blue);

    outline-offset: 1px;
}

.password-toggle svg {
    width: 20px;
    height: 20px;

    display: block;

    pointer-events: none;
}


/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert {
    padding: 12px 14px;

    border-radius: 11px;

    margin-bottom: 16px;

    border:
        1px solid;

    box-shadow:
        0 5px 14px rgba(15, 27, 45, .035);

    animation:
        pablosFadeUp 250ms var(--ease) both;
}

.alert.success {
    background:
        linear-gradient(
            145deg,
            #F2FCF5,
            #EAF8EF
        );

    border-color:
        #BDE5C9;

    color:
        #1F6A3E;
}

.alert.error {
    background:
        linear-gradient(
            145deg,
            #FFF5F4,
            #FFEFEE
        );

    border-color:
        #F2C5C1;

    color:
        #9C2C22;
}


/* ==========================================================================
   PROFILE
   ========================================================================== */

.profile-head {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .98),
            rgba(247, 251, 255, .92)
        );

    border:
        1px solid rgba(15, 27, 45, .075);

    border-radius: 17px;

    padding: 20px;

    display: flex;

    justify-content: space-between;

    gap: 16px;

    margin-bottom: 18px;

    box-shadow:
        0 9px 28px rgba(15, 27, 45, .055);

    position: relative;

    overflow: hidden;
}

.profile-head::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 180px;
    height: 100%;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(110, 193, 255, .13),
            transparent 70%
        );

    pointer-events: none;
}

.profile-title h1 {
    margin:
        0 0 8px;

    color:
        var(--navy);
}

.profile-meta {
    display: flex;

    gap: 16px;

    flex-wrap: wrap;

    color:
        var(--muted);

    font-size: 13px;
}


/* ==========================================================================
   TIMELINE
   ========================================================================== */

.timeline {
    display: grid;

    gap: 11px;
}

.timeline-item {
    position: relative;

    border-left:
        2px solid rgba(110, 193, 255, .35);

    padding-left: 14px;
}

.timeline-item::before {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    left: -4.5px;
    top: 6px;

    border-radius: 50%;

    background:
        var(--blue);

    box-shadow:
        0 0 0 4px rgba(110, 193, 255, .10);
}

.timeline-item small {
    color:
        var(--muted);
}


/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.empty {
    padding: 34px 28px;

    text-align: center;

    color:
        var(--muted);
}


/* ==========================================================================
   LIST ROWS / DOCUMENTS
   ========================================================================== */

.doc-row,
.list-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    padding: 11px 0;

    border-bottom:
        1px solid rgba(15, 27, 45, .06);

    transition:
        padding var(--transition),
        background var(--transition);
}

.doc-row:last-child,
.list-row:last-child {
    border-bottom: 0;
}


/* ==========================================================================
   PHOTOS
   ========================================================================== */

.photo-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 13px;
}

.photo-card {
    border:
        1px solid rgba(15, 27, 45, .08);

    border-radius: 13px;

    overflow: hidden;

    background:
        #fff;

    box-shadow:
        0 7px 20px rgba(15, 27, 45, .045);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.photo-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(110, 193, 255, .26);

    box-shadow:
        0 15px 30px rgba(15, 27, 45, .09);
}

.photo-card img {
    width: 100%;

    height: 155px;

    object-fit: cover;

    display: block;

    transition:
        transform 300ms var(--ease),
        filter 300ms var(--ease);
}

.photo-card:hover img {
    transform:
        scale(1.025);

    filter:
        saturate(1.04)
        contrast(1.015);
}

.photo-actions {
    padding: 8px;

    display: flex;

    gap: 6px;

    flex-wrap: wrap;

    background:
        linear-gradient(
            180deg,
            #FFFFFF,
            #FAFCFF
        );
}


/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination {
    display: flex;

    gap: 6px;

    margin-top: 16px;
}

.pagination a {
    min-width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(15, 27, 45, .09);

    border-radius: 9px;

    background:
        #fff;

    color:
        var(--navy);

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.pagination a:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(110, 193, 255, .45);

    background:
        var(--ice);

    box-shadow:
        0 5px 14px rgba(15, 27, 45, .06);
}

.pagination a:active {
    transform:
        scale(.93);
}

.pagination a.active {
    color:
        #fff;

    border-color:
        transparent;

    background:
        linear-gradient(
            135deg,
            var(--navy-600),
            var(--navy)
        );

    box-shadow:
        0 7px 18px rgba(15, 27, 45, .18);
}


/* ==========================================================================
   SECTION TITLES
   ========================================================================== */

.section-title {
    font-size:
        11.5px;

    text-transform:
        uppercase;

    letter-spacing:
        1.05px;

    color:
        #6F7C8D;

    margin:
        5px 0 12px;

    font-weight:
        750;
}


/* ==========================================================================
   DETAIL GRID
   ========================================================================== */

.detail-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 12px;
}

.detail {
    padding: 13px;

    background:
        linear-gradient(
            145deg,
            #FBFDFF,
            #F6FAFE
        );

    border:
        1px solid rgba(15, 27, 45, .065);

    border-radius: 11px;

    transition:
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.detail:hover {
    transform:
        translateY(-1px);

    border-color:
        rgba(110, 193, 255, .24);

    box-shadow:
        0 7px 18px rgba(15, 27, 45, .045);
}

.detail small {
    display: block;

    color:
        var(--muted);

    margin-bottom:
        5px;
}

.detail strong {
    font-size:
        14px;

    color:
        var(--navy);
}


/* ==========================================================================
   SEARCH SECTION
   ========================================================================== */

.search-section {
    margin-bottom:
        24px;
}

.search-section h2 {
    font-size:
        16px;
}


/* ==========================================================================
   QUICK LINKS
   ========================================================================== */

.quick-links {
    display:
        flex;

    gap:
        10px;

    flex-wrap:
        wrap;
}


/* ==========================================================================
   WARNING BOX
   ========================================================================== */

.warning-box {
    padding:
        12px 13px;

    border:
        1px solid rgba(212, 175, 55, .34);

    background:
        linear-gradient(
            145deg,
            #FFFBF0,
            #FFF6DE
        );

    border-radius:
        11px;

    margin-bottom:
        15px;

    color:
        #70551A;

    box-shadow:
        0 5px 15px rgba(212, 175, 55, .06);
}


/* ==========================================================================
   CHECKBOX
   ========================================================================== */

.checkbox-line {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}

.checkbox-line input {
    width:
        auto;

    accent-color:
        var(--navy-600);
}


/* ==========================================================================
   LOGIN / AUTH
   ========================================================================== */

.auth-body {
    min-height:
        100vh;

    display:
        grid;

    place-items:
        center;

    padding:
        30px;

    position:
        relative;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(110, 193, 255, .17),
            transparent 24%
        ),
        radial-gradient(
            circle at 85% 78%,
            rgba(212, 175, 55, .08),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            var(--navy-950) 0%,
            var(--navy) 42%,
            #F2F7FC 42%,
            #F8FAFD 100%
        );
}

.auth-body::before {
    content: "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    left:
        -250px;

    bottom:
        -250px;

    border:
        1px solid rgba(110, 193, 255, .12);

    border-radius:
        50%;

    box-shadow:
        0 0 0 70px rgba(110, 193, 255, .025),
        0 0 0 140px rgba(110, 193, 255, .018);
}

.auth-shell {
    width:
        min(950px, 100%);

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    border-radius:
        22px;

    overflow:
        hidden;

    position:
        relative;

    z-index:
        1;

    box-shadow:
        0 30px 90px rgba(7, 19, 33, .22);

    border:
        1px solid rgba(255, 255, 255, .10);

    animation:
        pablosFadeUp 480ms var(--ease) both;
}

.auth-brand {
    color:
        #fff;

    padding:
        70px 54px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    position:
        relative;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(110, 193, 255, .16),
            transparent 30%
        ),
        radial-gradient(
            circle at 95% 100%,
            rgba(212, 175, 55, .10),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #081522,
            #10243A
        );
}

.auth-brand::after {
    content: "";

    position:
        absolute;

    right:
        -70px;

    bottom:
        -70px;

    width:
        210px;

    height:
        210px;

    border:
        1px solid rgba(110, 193, 255, .10);

    border-radius:
        50%;

    box-shadow:
        0 0 0 35px rgba(110, 193, 255, .025),
        0 0 0 70px rgba(110, 193, 255, .018);
}

.brand-mark {
    width:
        58px;

    height:
        58px;

    font-size:
        28px;

    margin-bottom:
        18px;
}

.brand-name {
    font-weight:
        800;

    letter-spacing:
        4px;

    font-size:
        28px;
}

.brand-sub {
    letter-spacing:
        5px;

    font-size:
        11px;

    color:
        #AEBCD0;

    margin-top:
        4px;
}

.auth-brand p {
    color:
        #BBC8D7;

    max-width:
        320px;

    margin-top:
        24px;

    line-height:
        1.65;
}

.auth-logo {
    max-width:
        260px;

    max-height:
        105px;

    object-fit:
        contain;

    object-position:
        left;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F5F9FE
        );

    border-radius:
        15px;

    padding:
        10px 12px;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, .18);

    position:
        relative;

    z-index:
        1;
}

.auth-card {
    background:
        rgba(255, 255, 255, .97);

    padding:
        60px 54px;

    min-height:
        520px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}

.auth-card h1 {
    margin:
        0 0 8px;

    color:
        var(--navy);

    letter-spacing:
        -.55px;
}

.auth-card .form-group {
    margin-top:
        14px;
}

.auth-lang {
    position:
        fixed;

    top:
        24px;

    right:
        30px;

    background:
        rgba(255, 255, 255, .90);

    backdrop-filter:
        blur(10px);

    padding:
        7px 10px;

    border-radius:
        10px;

    box-shadow:
        var(--shadow);

    z-index:
        3;
}

.auth-footer-link {
    display:
        block;

    margin-top:
        16px;

    color:
        #55718F;

    font-size:
        13px;

    transition:
        color var(--transition);
}

.auth-footer-link:hover {
    color:
        var(--navy-600);
}


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

.mobile-menu {
    display:
        none;

    border:
        0;

    background:
        transparent;

    color:
        var(--navy);

    font-size:
        22px;

    border-radius:
        9px;

    transition:
        background var(--transition),
        transform var(--transition);
}

.mobile-menu:hover {
    background:
        var(--ice-2);
}

.mobile-menu:active {
    transform:
        scale(.92);
}


/* ==========================================================================
   MICRO INTERACTIONS
   ========================================================================== */

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color:
        transparent;
}

button:disabled,
.btn:disabled {
    opacity:
        .52;

    cursor:
        not-allowed;

    transform:
        none !important;

    filter:
        none !important;
}

.card,
.stat,
.table-wrap,
.profile-head,
.filters {
    animation:
        pablosFadeUp 320ms var(--ease) both;
}

.card:nth-child(2),
.stat:nth-child(2) {
    animation-delay:
        35ms;
}

.card:nth-child(3),
.stat:nth-child(3) {
    animation-delay:
        70ms;
}

.card:nth-child(4),
.stat:nth-child(4) {
    animation-delay:
        105ms;
}

.card:nth-child(5),
.stat:nth-child(5) {
    animation-delay:
        140ms;
}

.card:nth-child(6),
.stat:nth-child(6) {
    animation-delay:
        175ms;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {

    .stats {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .photo-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }
}


@media (max-width: 900px) {

    .sidebar {
        transform:
            translateX(-100%);

        transition:
            transform 240ms var(--ease);

        box-shadow:
            22px 0 60px rgba(7, 19, 33, .22);
    }

    .sidebar.open {
        transform:
            translateX(0);
    }

    .main-wrap {
        margin-left:
            0;

        width:
            100%;
    }

    .mobile-menu {
        display:
            block;
    }

    .topbar {
        padding:
            0 15px;
    }

    .top-back {
        flex-basis:
            38px;

        width:
            38px;

        height:
            38px;
    }

    .sidebar-logo-surface {
        min-height:
            62px;
    }

    .sidebar-brand.has-real-logo img {
        max-height:
            58px;
    }

    .user-chip span:last-child {
        display:
            none;
    }

    .two-col,
    .three-col {
        grid-template-columns:
            1fr;
    }

    .detail-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .auth-shell {
        grid-template-columns:
            1fr;
    }

    .auth-brand {
        display:
            none;
    }

    .auth-card {
        min-height:
            500px;
    }

    .auth-body {
        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(110, 193, 255, .12),
                transparent 30%
            ),
            #F4F8FC;
    }

    .photo-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .content {
        padding:
            18px 12px;
    }

    .stats {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            11px;
    }

    .stat {
        padding:
            15px;

        min-height:
            100px;
    }

    .stat strong {
        font-size:
            23px;
    }

    .page-head {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .form-grid,
    .detail-grid {
        grid-template-columns:
            1fr;
    }

    .top-actions .language-switch {
        display:
            none;
    }

    .global-search {
        max-width:
            none;
    }

    .auth-card {
        padding:
            40px 24px;
    }

    .filters > * {
        flex:
            1 1 140px;
    }

    .photo-grid {
        grid-template-columns:
            1fr;
    }

    .profile-head {
        flex-direction:
            column;
    }

    .form-actions {
        flex-wrap:
            wrap;
    }

    .btn {
        min-height:
            41px;
    }
}


/* ==========================================================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================================================== */

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

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}

/* ==========================================================================
   PABLOS CRM — GLOBAL TYPOGRAPHY SYSTEM
   One consistent scale across all CRM modules
   ========================================================================== */

:root {
    --crm-title-size: 34px;
    --crm-body-size: 13px;
    --crm-card-title-size: 15px;
    --crm-card-subtitle-size: 12px;
    --crm-table-head-size: 11px;
    --crm-table-body-size: 13px;
    --crm-label-size: 11px;
    --crm-small-size: 12px;
    --crm-button-size: 13px;
    --crm-button-small-size: 12px;
    --crm-kpi-label-size: 11px;
    --crm-kpi-value-size: 27px;
}

/* MAIN CONTENT */
.content {
    font-size: var(--crm-body-size) !important;
}

/* PAGE / PROFILE TITLES */
.content h1,
.page-head h1,
.profile-title h1,
.owner-profile-name h1,
.partner-profile-name h1,
.client-profile-name h1 {
    font-size: var(--crm-title-size) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: -.8px !important;
}

/* HERO EYEBROWS */
.content [class*="eyebrow"] {
    font-size: 10.5px !important;
}

/* HERO DESCRIPTIONS */
.content [class*="command-head"] p,
.page-head p {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* KPI */
.content [class*="kpi-label"],
.stat small {
    font-size: var(--crm-kpi-label-size) !important;
}

.content [class*="kpi-value"],
.stat strong {
    font-size: var(--crm-kpi-value-size) !important;
}

/* CARD TITLES */
.card-head h2,
.card-head h3,
.content [class*="card-title"] {
    font-size: var(--crm-card-title-size) !important;
    font-weight: 760 !important;
}

.content [class*="card-subtitle"] {
    font-size: var(--crm-card-subtitle-size) !important;
    line-height: 1.45 !important;
}

/* FILTERS */
.content [class*="filter-title"] {
    font-size: 14px !important;
    font-weight: 760 !important;
}

.content [class*="filter-live"] {
    font-size: 11.5px !important;
}

/* FORM CONTROLS */
.content input,
.content select,
.content textarea {
    font-size: 13px !important;
}

.form-group label {
    font-size: 12.5px !important;
}

/* BUTTONS */
.content .btn {
    font-size: var(--crm-button-size) !important;
}

.content .btn.small {
    font-size: var(--crm-button-small-size) !important;
}

/* TABLES */
.content table th,
.data-table th,
.owners-table th,
.partners-table th,
.clients-table th,
.owner-properties-table th,
.partner-properties-table th {
    font-size: var(--crm-table-head-size) !important;
}

.content table td,
.data-table td,
.owners-table td,
.partners-table td,
.clients-table td,
.owner-properties-table td,
.partner-properties-table td {
    font-size: var(--crm-table-body-size) !important;
}

/* IMPORTANT NAMES / VALUES */
.owner-name,
.partner-name,
.client-name,
.owner-agent-name,
.client-agent,
.owner-property-type,
.partner-property-type,
.client-list-row-title,
.owner-doc-name {
    font-size: 13px !important;
}

/* BADGES / CHIPS / COUNTERS */
.badge,
.content [class*="-chip"],
.owner-property-count,
.partner-count,
.client-requirement-count,
.source-badge,
.web-badge {
    font-size: 11px !important;
}

/* LIST PANEL HEADERS */
.owners-list-title,
.partners-list-title,
.clients-list-title {
    font-size: 14px !important;
}

.owners-list-meta,
.partners-list-meta,
.clients-list-meta,
.owners-list-status,
.partners-list-status,
.clients-list-status {
    font-size: 11.5px !important;
}

/* META PILLS */
.owner-meta-pill,
.partner-meta-pill,
.client-meta-pill,
.profile-meta {
    font-size: 12px !important;
}

/* DETAILS */
.detail small,
.owner-detail-label,
.partner-detail-label,
.client-detail-label {
    font-size: var(--crm-label-size) !important;
}

.detail strong,
.owner-detail-value,
.partner-detail-value,
.client-detail-value {
    font-size: 13px !important;
}

/* SECONDARY TEXT */
.small-text,
.owner-property-location,
.owner-doc-meta,
.client-list-row-sub,
.partner-subtext {
    font-size: var(--crm-small-size) !important;
}

/* TIMELINES / ACTIVITY */
.owner-timeline-item,
.client-timeline-item,
.owner-activity-item,
.client-activity-item {
    font-size: 12.5px !important;
}

.owner-timeline-user,
.client-timeline-user,
.owner-activity-user,
.client-activity-user {
    font-size: 12.5px !important;
}

.owner-timeline-text,
.client-timeline-text,
.owner-activity-action,
.client-activity-action {
    font-size: 12px !important;
}

.owner-timeline-date,
.client-timeline-date,
.owner-activity-date,
.client-activity-date {
    font-size: 10.5px !important;
}

/* RESPONSIVE TYPOGRAPHY */
@media (max-width: 700px) {
    :root {
        --crm-title-size: 28px;
        --crm-table-body-size: 12.5px;
    }
}

/* ================================================================
   PABLOS CRM — SHARED PREMIUM CREATE / EDIT FORMS
   Used by Clients, Requirements, Follow-ups and Agents.
================================================================ */

.entity-form-page {
    display: grid;
    gap: 18px;
}

.entity-form-hero {
    position: relative;
    overflow: hidden;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 25px 27px;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 84% 0%, rgba(110,193,255,.20), transparent 29%),
        radial-gradient(circle at 100% 100%, rgba(212,175,55,.10), transparent 28%),
        linear-gradient(125deg, #071321 0%, #0F1B2D 52%, #173A5C 100%);
    border: 1px solid rgba(110,193,255,.13);
    box-shadow: 0 18px 45px rgba(15,27,45,.14);
}

.entity-form-hero::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -80px;
    top: -120px;
    border-radius: 50%;
    border: 1px solid rgba(110,193,255,.12);
    box-shadow:
        0 0 0 40px rgba(110,193,255,.022),
        0 0 0 80px rgba(110,193,255,.014);
    pointer-events: none;
}

.entity-form-hero-copy,
.entity-form-hero-actions {
    position: relative;
    z-index: 2;
}

.entity-form-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    color: #9ED7FF;
    font-weight: 800;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.entity-form-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6EC1FF;
    box-shadow:
        0 0 0 5px rgba(110,193,255,.10),
        0 0 14px rgba(110,193,255,.55);
}

.entity-form-hero h1 {
    margin: 0;
    color: #fff;
}

.entity-form-hero p {
    max-width: 720px;
    margin: 9px 0 0;
    color: #B7C8D8;
    line-height: 1.5;
}

.entity-form-hero-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.entity-form-hero .btn.secondary {
    color: #EAF7FF;
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.14);
}

.entity-form-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) 300px;
    gap: 18px;
    align-items: start;
}

.entity-form-main,
.entity-form-sidebar {
    display: grid;
    gap: 18px;
}

.entity-form-sidebar {
    position: sticky;
    top: 92px;
}

.entity-form-card,
.entity-side-card {
    overflow: hidden;
    border-radius: 17px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(15,27,45,.07);
    box-shadow: 0 9px 27px rgba(15,27,45,.05);
}

.entity-form-card-head {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 17px;
    border-bottom: 1px solid rgba(15,27,45,.055);
    background: linear-gradient(180deg, #fff, #FBFDFF);
}

.entity-form-card-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #1E4F7A;
    background: #EEF7FF;
    border: 1px solid rgba(110,193,255,.17);
}

.entity-form-card-icon svg {
    width: 18px;
    height: 18px;
}

.entity-form-card-title {
    font-size: 15px;
    font-weight: 800;
    color: #0F1B2D;
}

.entity-form-card-subtitle {
    margin-top: 2px;
    color: #728095;
    font-size: 12px;
    line-height: 1.4;
}

.entity-form-card-body {
    padding: 18px;
}

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

.entity-form-field {
    display: grid;
    gap: 7px;
}

.entity-form-field.full {
    grid-column: 1 / -1;
}

.entity-form-field label {
    color: #314055;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .35px;
    text-transform: uppercase;
}

.entity-form-field input,
.entity-form-field select,
.entity-form-field textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid rgba(15,27,45,.12);
    background: #fff;
    color: #0F1B2D;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.entity-form-field textarea {
    min-height: 112px;
    resize: vertical;
    line-height: 1.55;
}

.entity-form-field input:focus,
.entity-form-field select:focus,
.entity-form-field textarea:focus {
    border-color: rgba(30,79,122,.46);
    box-shadow: 0 0 0 4px rgba(110,193,255,.12);
    background: #FCFEFF;
}

.entity-form-field small {
    color: #7B8798;
    line-height: 1.45;
}

.entity-form-checkbox {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 11px;
    background: #F8FBFF;
    border: 1px solid rgba(15,27,45,.07);
}

.entity-form-checkbox input {
    width: 16px;
    height: 16px;
    min-height: 0;
}

.entity-form-warning {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(180,112,23,.22);
    background: #FFF9EF;
    color: #744A13;
    line-height: 1.5;
}

.entity-side-card-head {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(15,27,45,.055);
    font-size: 14px;
    font-weight: 800;
    color: #0F1B2D;
}

.entity-side-card-body {
    display: grid;
    gap: 12px;
    padding: 15px 16px;
}

.entity-summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.entity-summary-label {
    color: #7A8798;
    font-size: 11px;
    font-weight: 700;
}

.entity-summary-value {
    max-width: 58%;
    color: #1B2B3F;
    font-size: 12.5px;
    font-weight: 750;
    text-align: right;
    word-break: break-word;
}

.entity-form-note {
    padding: 13px 14px;
    border-radius: 12px;
    color: #526176;
    background: #F7FAFD;
    border: 1px solid rgba(15,27,45,.055);
    font-size: 12px;
    line-height: 1.55;
}

.entity-form-save {
    width: 100%;
    min-height: 44px;
}

.entity-form-divider {
    height: 1px;
    background: rgba(15,27,45,.06);
}

.entity-form-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #1E4F7A;
    background: #EEF7FF;
    border: 1px solid rgba(110,193,255,.18);
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 980px) {
    .entity-form-layout {
        grid-template-columns: 1fr;
    }
    .entity-form-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 700px) {
    .entity-form-hero {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        padding: 21px;
    }
    .entity-form-hero-actions,
    .entity-form-hero-actions .btn {
        width: 100%;
    }
    .entity-form-grid,
    .entity-form-sidebar {
        grid-template-columns: 1fr;
    }
    .entity-form-card-body {
        padding: 15px;
    }
}