/* ==========================================================================
   ProbiNotes Property — Design System
   Brand: warm gold (mascot) + deep blue (shirt). Premium, calm, trustworthy.
   Complements Tailwind (Play CDN) with semantic components + tokens.
   ========================================================================== */

:root {
    /* Brand — Gold (primary) */
    --gold-50:  #FFF9ED;
    --gold-100: #FEEFCB;
    --gold-200: #FDDD93;
    --gold-300: #FBC75B;
    --gold-400: #F8B032;
    --gold-500: #F4A621;   /* primary */
    --gold-600: #D9850F;
    --gold-700: #B46410;
    --gold-800: #924E14;
    --gold-900: #784014;

    /* Brand — Navy / Blue (secondary, from the mascot shirt) */
    --navy-50:  #EEF4FB;
    --navy-100: #D6E4F5;
    --navy-200: #AFC9EB;
    --navy-300: #7FA8DD;
    --navy-400: #4E80C7;
    --navy-500: #2C61AC;   /* secondary */
    --navy-600: #1E4E92;
    --navy-700: #1A3F76;
    --navy-800: #143058;
    --navy-900: #0E2440;   /* ink / sidebar */

    /* Neutrals */
    --ink:      #0E2440;
    --slate-50: #F7F9FC;
    --slate-100:#EFF3F8;
    --slate-200:#E2E8F0;
    --slate-300:#CBD5E1;
    --slate-400:#94A3B8;
    --slate-500:#64748B;
    --slate-600:#475569;
    --slate-700:#334155;
    --slate-800:#1E293B;

    /* Semantic */
    --success: #16A34A;
    --success-bg: #DCFCE7;
    --warning: #D97706;
    --warning-bg: #FEF3C7;
    --danger:  #DC2626;
    --danger-bg: #FEE2E2;
    --info:    #2563EB;
    --info-bg: #DBEAFE;

    /* Surfaces */
    --bg:       #F4F7FB;
    --surface:  #FFFFFF;
    --border:   #E6ECF3;

    /* Effects */
    --radius:    14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --shadow-xs: 0 1px 2px rgba(14,36,64,.06);
    --shadow-sm: 0 1px 3px rgba(14,36,64,.08), 0 1px 2px rgba(14,36,64,.04);
    --shadow:    0 4px 16px rgba(14,36,64,.08);
    --shadow-lg: 0 12px 32px rgba(14,36,64,.12);
    --shadow-gold: 0 8px 24px rgba(244,166,33,.35);

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Outfit', var(--font-sans);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, .font-display {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
}

/* --- Brand atmosphere --- */
.pn-aurora {
    position: relative;
    background:
        radial-gradient(900px 500px at 12% -10%, rgba(244,166,33,.16), transparent 60%),
        radial-gradient(900px 600px at 100% 0%, rgba(44,97,172,.20), transparent 55%),
        linear-gradient(160deg, var(--navy-900), #0A1B33 60%, #08152A);
}
.pn-dotgrid {
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* --- Buttons --- */
.pn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: .9rem; line-height: 1;
    padding: .7rem 1.15rem; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer;
    transition: all .18s ease; white-space: nowrap; user-select: none;
}
.pn-btn:active { transform: translateY(1px); }
.pn-btn:focus-visible { outline: 3px solid rgba(244,166,33,.4); outline-offset: 2px; }

.pn-btn-primary {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    color: #3A2606; box-shadow: var(--shadow-gold);
}
.pn-btn-primary:hover { filter: brightness(1.04); box-shadow: 0 10px 28px rgba(244,166,33,.45); }

.pn-btn-navy { background: var(--navy-700); color: #fff; }
.pn-btn-navy:hover { background: var(--navy-800); }

.pn-btn-outline { background: var(--surface); border-color: var(--border); color: var(--slate-700); }
.pn-btn-outline:hover { border-color: var(--slate-300); background: var(--slate-50); }

.pn-btn-ghost { background: transparent; color: var(--slate-600); }
.pn-btn-ghost:hover { background: var(--slate-100); }

.pn-btn-danger { background: var(--danger); color: #fff; }
.pn-btn-block { width: 100%; }
.pn-btn-lg { padding: .95rem 1.4rem; font-size: 1rem; }

/* --- Cards --- */
.pn-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.pn-card-pad { padding: 1.25rem 1.35rem; }
.pn-card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.pn-card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* --- Stat cards --- */
.pn-stat-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: grid; place-items: center; font-size: 1.15rem; flex-shrink: 0;
}
.pn-stat-value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1.1; }

/* --- Badges --- */
.pn-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .72rem; font-weight: 600; padding: .28rem .6rem;
    border-radius: 999px; line-height: 1; white-space: nowrap;
}
.pn-badge i { font-size: .6rem; }
.badge-success { background: var(--success-bg); color: #15803D; }
.badge-warning { background: var(--warning-bg); color: #B45309; }
.badge-danger  { background: var(--danger-bg);  color: #B91C1C; }
.badge-info    { background: var(--info-bg);    color: #1D4ED8; }
.badge-muted   { background: var(--slate-100);  color: var(--slate-600); }
.badge-gold    { background: var(--gold-100);   color: var(--gold-800); }

/* --- Forms --- */
.pn-label { display:block; font-size:.82rem; font-weight:600; color:var(--slate-700); margin-bottom:.4rem; }
.pn-input, .pn-select, .pn-textarea {
    width: 100%; background: var(--surface);
    border: 1px solid var(--slate-200); border-radius: var(--radius-sm);
    padding: .72rem .9rem; font-size: .92rem; color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}
.pn-input::placeholder { color: var(--slate-400); }
.pn-input:focus, .pn-select:focus, .pn-textarea:focus {
    outline: none; border-color: var(--gold-400);
    box-shadow: 0 0 0 3px rgba(244,166,33,.18);
}
.pn-input.has-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.pn-error { color: var(--danger); font-size: .78rem; margin-top: .35rem; }
.pn-input-group { position: relative; }
.pn-input-group .pn-input { padding-left: 2.6rem; }
.pn-input-icon { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--slate-400); }

/* --- Sidebar --- */
.pn-sidebar { background: var(--navy-900); color: #C7D5E8; }
.pn-nav-section { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color: #5C7295; padding: 1rem 1rem .4rem; }
.pn-nav-link {
    display:flex; align-items:center; gap:.8rem;
    padding:.62rem .85rem; margin:.1rem .55rem; border-radius:10px;
    color:#AFC0DA; font-size:.9rem; font-weight:500; transition: all .15s;
}
.pn-nav-link i { width:20px; text-align:center; font-size:1rem; color:#7C92B6; transition: color .15s; }
.pn-nav-link:hover { background: rgba(255,255,255,.05); color:#fff; }
.pn-nav-link:hover i { color: var(--gold-400); }
.pn-nav-link.active { background: linear-gradient(135deg, rgba(244,166,33,.18), rgba(244,166,33,.06));
    color:#fff; box-shadow: inset 3px 0 0 var(--gold-500); }
.pn-nav-link.active i { color: var(--gold-400); }

/* --- Topbar --- */
.pn-topbar { background: rgba(255,255,255,.85); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border); }

/* --- Mobile bottom nav --- */
.pn-bottomnav { background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(14,36,64,.06); }
.pn-bottomnav a { display:flex; flex-direction:column; align-items:center; gap:.2rem;
    font-size:.66rem; font-weight:600; color: var(--slate-400); padding:.5rem 0; flex:1; transition:color .15s; }
.pn-bottomnav a i { font-size:1.15rem; }
.pn-bottomnav a.active { color: var(--gold-600); }

/* --- Avatar --- */
.pn-avatar { display:grid; place-items:center; border-radius:50%;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-600));
    color:#3A2606; font-weight:700; font-family:var(--font-display); }

/* --- Tables --- */
.pn-table { width:100%; border-collapse: collapse; }
.pn-table th { text-align:left; font-size:.74rem; font-weight:700; letter-spacing:.03em;
    text-transform:uppercase; color:var(--slate-500); padding:.7rem 1rem; border-bottom:1px solid var(--border); }
.pn-table td { padding:.85rem 1rem; border-bottom:1px solid var(--slate-100); font-size:.9rem; }
.pn-table tbody tr:last-child td { border-bottom:none; }
.pn-table tbody tr { transition: background .12s; }
.pn-table tbody tr:hover { background: var(--slate-50); }

/* --- Misc --- */
.pn-divider { height:1px; background:var(--border); }
.pn-skeleton { background: linear-gradient(90deg,#eef2f7 25%,#e4eaf1 37%,#eef2f7 63%);
    background-size: 400% 100%; animation: pn-shimmer 1.4s ease infinite; border-radius:8px; }
@keyframes pn-shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }

.pn-fade-up { animation: pnFadeUp .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pnFadeUp { from { opacity:0; transform: translateY(10px);} to {opacity:1; transform:none;} }
.pn-delay-1{animation-delay:.05s}.pn-delay-2{animation-delay:.1s}.pn-delay-3{animation-delay:.15s}
.pn-delay-4{animation-delay:.2s}.pn-delay-5{animation-delay:.25s}.pn-delay-6{animation-delay:.3s}

/* --- Dropdowns / popovers --- */
.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 8px); width: 14rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow-lg); padding: .4rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 50;
}
.dropdown-menu.show { opacity: 1; visibility: visible; transform: none; }
.dropdown-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .65rem; border-radius: 9px;
    font-size: .875rem; color: var(--slate-700); cursor: pointer;
    background: none; border: none; width: 100%; text-align: left;
}
.dropdown-item:hover { background: var(--slate-100); }

/* Custom scrollbars */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* Hide scrollbar utility for horizontal scrollers */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }