/* =========================================================================
   CyberNest Secure CRM — Brand stylesheet
   Per brand guide: primary #F05A28 · accent #19A974 · dark #141416 / #1F2933
   Font family: Montserrat (700 / 600) with system fallbacks
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
    --brand-primary:        #F05A28;
    --brand-primary-dark:   #C7431A;
    --brand-primary-soft:   #FFE9DC;
    --brand-accent:         #19A974;
    --brand-accent-dark:    #12805A;
    --brand-accent-soft:    #DCF3EA;
    --brand-dark:           #141416;
    --brand-dark-2:         #1F2933;
    --brand-gray:           #6c757d;
    --brand-gray-soft:      #F6F7F9;
    --brand-border:         #E5E7EB;
    --brand-cyan:           #00FFFF;
    --brand-magenta:        #FF00FF;
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(242, 67, 10, .25);
    scroll-behavior: smooth;
}

html, body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: var(--brand-dark);
    background: #FAFAFC;
    margin: 0;
    overflow-x: hidden; /* prevent horizontal scroll on mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

/* iOS Safari: form fields with font-size < 16px trigger zoom on focus */
input, textarea, select, button { font-family: inherit; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="search"], input[type="url"], textarea, select {
    font-size: 16px;
}
@media (min-width: 768px) {
    input[type="text"], input[type="email"], input[type="password"], input[type="number"],
    input[type="tel"], input[type="search"], input[type="url"], textarea, select {
        font-size: 1rem;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--brand-dark);
    letter-spacing: -0.01em;
}

h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

a, .btn-link {
    color: var(--brand-primary);
}
a:hover, .btn-link:hover {
    color: var(--brand-primary-dark);
}

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

.btn-primary {
    color: #fff;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: #fff;
}
.btn-primary:disabled {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    opacity: .6;
}

.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    font-weight: 600;
}
.btn-outline-primary:hover {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.btn-success {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
}
.btn-success:hover {
    background: var(--brand-accent-dark);
    border-color: var(--brand-accent-dark);
}
.btn-outline-success {
    color: var(--brand-accent-dark);
    border-color: var(--brand-accent);
}
.btn-outline-success:hover {
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    color: #fff;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 .15rem #fff, 0 0 0 .3rem var(--brand-primary);
}

/* ---- Cards & layout -------------------------------------------------- */

.card {
    border: 1px solid var(--brand-border);
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(20,20,22,.04);
}
.card-header {
    background: var(--brand-gray-soft);
    border-bottom: 1px solid var(--brand-border);
    font-weight: 600;
}

.content {
    padding-top: 1.25rem;
}

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

.table thead th {
    color: var(--brand-gray);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .03em;
    border-bottom-color: var(--brand-border);
}
.table-hover tbody tr:hover {
    background: var(--brand-primary-soft);
}
code {
    color: var(--brand-primary-dark);
    background: var(--brand-primary-soft);
    padding: .15rem .35rem;
    border-radius: .25rem;
    font-size: .875em;
}

/* ---- Badges & status pills ------------------------------------------ */

.badge {
    font-weight: 600;
    padding: .35em .6em;
}
.bg-success {
    background: var(--brand-accent) !important;
}
.bg-primary {
    background: var(--brand-primary) !important;
}
.text-bg-primary {
    background: var(--brand-primary) !important;
    color: #fff !important;
}
.text-bg-success {
    background: var(--brand-accent) !important;
    color: #fff !important;
}
.text-bg-danger {
    background: #DC3545 !important;
    color: #fff !important;
}
.text-bg-warning {
    background: #F2A30A !important;
    color: var(--brand-dark) !important;
}

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

.form-control, .form-select {
    border-color: var(--brand-border);
    border-radius: .375rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
}
.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--brand-dark-2);
    margin-bottom: .25rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--brand-accent);
}
.invalid {
    outline: 1px solid #DC3545;
}
.validation-message {
    color: #DC3545;
}

/* ---- Dashboard helpers ---------------------------------------------- */

.kpi-card {
    border: 1px solid var(--brand-border);
    border-radius: .75rem;
    padding: 1.25rem 1.25rem 1rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(20,20,22,.04);
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease;
}
.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20,20,22,.08);
}
.kpi-card .kpi-label {
    color: var(--brand-gray);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .35rem;
}
.kpi-card .kpi-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--brand-dark);
    line-height: 1.1;
}
.kpi-card .kpi-sub {
    color: var(--brand-gray);
    font-size: .8125rem;
    margin-top: .35rem;
}
.kpi-card.kpi-primary { border-top: 3px solid var(--brand-primary); }
.kpi-card.kpi-accent  { border-top: 3px solid var(--brand-accent); }
.kpi-card.kpi-warn    { border-top: 3px solid #F2A30A; }
.kpi-card.kpi-danger  { border-top: 3px solid #DC3545; }

.chart-card {
    border: 1px solid var(--brand-border);
    border-radius: .75rem;
    padding: 1.25rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(20,20,22,.04);
}
.chart-card .chart-title {
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: 1rem;
    font-size: 1rem;
}

/* ---- Error boundary -------------------------------------------------- */

h1:focus { outline: none; }

.blazor-error-boundary {
    background: var(--brand-primary);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: .5rem;
}
.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ---- Utilities ------------------------------------------------------- */

.brand-stripe-top {
    height: 3px;
    background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
}

/* ---- Responsive helpers --------------------------------------------- */

/* Tables: horizontal scroll on small screens (data tables can be wide) */
.table { width: 100%; }
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* SVG charts: ensure they shrink fluidly */
.chart-card svg {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* Tap-friendly buttons on touch devices */
@media (hover: none) and (pointer: coarse) {
    .btn, .nav-link, .form-control, .form-select {
        min-height: 44px;
    }
    .btn-sm {
        min-height: 36px;
    }
}

/* Mobile layout adjustments */
@media (max-width: 640px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }

    .content { padding-top: .75rem; padding-left: 1rem !important; padding-right: 1rem !important; }
    .kpi-card { padding: 1rem; }
    .kpi-card .kpi-value { font-size: 1.625rem; }
    .chart-card { padding: 1rem; }
    .chart-card .chart-title { font-size: .9375rem; }

    /* Stack column-aligned content in nav top row gracefully */
    .navbar-brand { font-size: .95rem; }

    /* Hide non-essential parts of the recent-activity feed */
    .table thead th { font-size: .65rem; padding: .35rem; }
    .table td { padding: .4rem; font-size: .85rem; }

    /* Cards: less rounding, full-width */
    .card, .chart-card, .kpi-card { border-radius: .5rem; }

    /* Forms: full width inputs */
    .form-control, .form-select { width: 100%; }
}

/* Tablet portrait */
@media (min-width: 641px) and (max-width: 991px) {
    .kpi-card .kpi-value { font-size: 1.875rem; }
}

/* Print styles */
@media print {
    .sidebar, .navbar, .btn, button { display: none !important; }
    .page { display: block !important; }
    main { width: 100%; }
    .kpi-card, .chart-card, .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    a { color: var(--brand-dark); text-decoration: none; }
    body { background: white; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* Cross-browser: webkit scrollbar styling (used by sidebar on desktop) */
.nav-scrollable::-webkit-scrollbar { width: 6px; }
.nav-scrollable::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; }
.nav-scrollable::-webkit-scrollbar-track { background: transparent; }
.nav-scrollable { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; }

/* Bootstrap row gutters: ensure consistent spacing across browsers */
.row.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }

/* Deals kanban column: narrower on phones for better readability */
.deal-stage-col {
    min-width: 240px;
    max-width: 240px;
}
@media (min-width: 641px) {
    .deal-stage-col { min-width: 280px; max-width: 280px; }
}

/* ===== v2.62 UI polish ===== */

/* Toast notifications (bottom-right stack, auto-expire) */
.cn-toasts {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 2000;
    display: flex; flex-direction: column; gap: .5rem; align-items: flex-end;
}
.cn-toast {
    padding: .55rem .9rem; border-radius: .5rem; color: #fff;
    font-size: .875rem; box-shadow: 0 4px 14px rgba(0,0,0,.18);
    cursor: pointer; animation: cn-toast-in .18s ease-out;
    max-width: 340px;
}
.cn-toast-success { background: #157347; }
.cn-toast-danger  { background: #DC3545; }
.cn-toast-dark    { background: #1F2933; }
@keyframes cn-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Skeleton loading rows */
.cn-skel {
    display: inline-block; height: .9rem; border-radius: .25rem;
    background: linear-gradient(90deg, #ECEEF1 25%, #F7F8FA 45%, #ECEEF1 65%);
    background-size: 200% 100%;
    animation: cn-skel-shimmer 1.2s ease-in-out infinite;
}
@keyframes cn-skel-shimmer { from { background-position: 200% 0; } to { background-position: -100% 0; } }

/* Global "+ New" quick-add menu */
.cn-quickadd { position: relative; }
.cn-quickadd-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 1500;
    background: #fff; border: 1px solid #E5E7EB; border-radius: .5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .35rem;
    min-width: 200px;
}
.cn-quickadd-menu a {
    display: block; padding: .4rem .65rem; border-radius: .35rem;
    color: #1F2933; text-decoration: none; font-size: .9rem;
}
.cn-quickadd-menu a:hover { background: #FFF1EC; color: #F05A28; }
.cn-quickadd-sep { border-top: 1px solid #EEF0F2; margin: .3rem .2rem; }