/*
 * index.css
 * Custom stylesheet for React CRM Application.
 * Replaces Tailwind CSS.
 * THEME & CREATIVE UPDATE
 */

/* 1. CSS Variables & Theming
----------------------------------------------------------------*/
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    
    /* Theme color variables definitions */
    --c-sky-100: #e0f2fe; --c-sky-300: #7dd3fc; --c-sky-500: #0ea5e9; --c-sky-600: #0284c7; --c-sky-700: #0369a1; --c-sky-900: #082f49;
    --c-green-100: #dcfce7; --c-green-300: #86efac; --c-green-500: #22c55e; --c-green-600: #16a34a; --c-green-700: #15803d; --c-green-900: #14532d;
    --c-rose-100: #ffe4e6; --c-rose-300: #fda4af; --c-rose-500: #f43f5e; --c-rose-600: #e11d48; --c-rose-700: #be123c; --c-rose-900: #881337;
    --c-orange-100: #ffedd5; --c-orange-300: #fdba74; --c-orange-500: #f97316; --c-orange-600: #ea580c; --c-orange-700: #c2410c; --c-orange-900: #7c2d12;
    --c-violet-100: #ede9fe; --c-violet-300: #c4b5fd; --c-violet-500: #8b5cf6; --c-violet-600: #7c3aed; --c-violet-700: #6d28d9; --c-violet-900: #4c1d95;
    --c-amber-100: #fef3c7; --c-amber-300: #fcd34d; --c-amber-500: #f59e0b; --c-amber-600: #d97706; --c-amber-700: #b45309; --c-amber-900: #78350f;
    
    /* Light Theme */
    --c-bg: #f1f5f9; /* slate-100 */
    --c-bg-2: #ffffff; /* white */
    --c-bg-3: #f8fafc; /* slate-50 */
    --c-text-1: #0f172a; /* slate-900 */
    --c-text-2: #475569; /* slate-600 */
    --c-text-3: #64748b; /* slate-500 */
    --c-border: #e2e8f0; /* slate-200 */
    --c-border-2: #cbd5e1; /* slate-300 */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --empty-state-bg: #f8fafc;
    --empty-state-art-bg: #e2e8f0;
    --empty-state-art-fg: #94a3b8;

    /* NEW: Sizing variables */
    --header-height: 56px;
}

html.dark {
    /* Dark Theme */
    --c-bg: #0f172a; /* slate-900 */
    --c-bg-2: #1e293b; /* slate-800 */
    --c-bg-3: #334155; /* slate-700 */
    --c-text-1: #f8fafc; /* slate-50 */
    --c-text-2: #cbd5e1; /* slate-300 */
    --c-text-3: #94a3b8; /* slate-400 */
    --c-border: #334155; /* slate-700 */
    --c-border-2: #475569; /* slate-600 */
    --shadow-color: rgba(0, 0, 0, 0.4);
    --empty-state-bg: #1e293b;
    --empty-state-art-bg: #334155;
    --empty-state-art-fg: #64748b;
}

/* 2. Global Styles & Resets
----------------------------------------------------------------*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--c-bg);
    color: var(--c-text-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-image 0.3s ease;
    font-size: 13px; 
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--c-text-1);
}

a {
    color: var(--c-primary-600);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

/* 3. Layout Components
----------------------------------------------------------------*/
.app-container {
    display: flex;
    font-family: var(--font-sans);
    background-color: transparent;
}

.main-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-left: calc(var(--gooey-sidebar-spacer) * 7);
    transition: margin-left 0.3s ease;
    /* Adjust margin to account for floating header's position and height */
    margin-top: calc(var(--header-height) + (var(--gooey-sidebar-spacer) * 2));
}


.page-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.8rem 1.2rem;
}

.global-alert-container {
    position: fixed;
    top: 4rem; 
    right: 1rem;
    z-index: 100;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem; 
    gap: 0.8rem;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
}

.page-title svg {
    color: var(--c-primary-600);
    width: 1.5rem; 
    height: 1.5rem;
}

/* 4. Core Components (from ui.tsx)
----------------------------------------------------------------*/

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: 0.3rem;
    box-shadow: 0 1px 2px 0 var(--shadow-color);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    padding: 0.3rem 0.6rem; 
    font-size: 0.75rem; 
    gap: 0.3rem;
}
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px -1px var(--shadow-color);
}
.btn:focus { outline: 2px solid transparent; outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: 0 1px 2px 0 var(--shadow-color); }
.btn svg { width: 0.8rem; height: 0.8rem; }

.btn-primary { background-color: var(--c-primary-600); color: white; border-color: var(--c-primary-600); }
.btn-primary:hover:not(:disabled) { background-color: var(--c-primary-700); border-color: var(--c-primary-700); }
.btn-primary:focus { box-shadow: 0 0 0 3px var(--c-primary-100); }

.btn-secondary { background-color: #e2e8f0; color: #334155; }
.btn-secondary:hover:not(:disabled) { background-color: #cbd5e1; }
html.dark .btn-secondary { background-color: #475569; color: #f1f5f9; }
html.dark .btn-secondary:hover:not(:disabled) { background-color: #64748b; }
.btn-secondary:focus { box-shadow: 0 0 0 3px #94a3b8; }

.btn-danger { background-color: #e11d48; color: white; }
.btn-danger:hover:not(:disabled) { background-color: #be123c; }

.btn-success { background-color: #16a34a; color: white; }
.btn-success:hover:not(:disabled) { background-color: #15803d; }


/* Forms */
.form-input, .form-select, .form-textarea {
    margin-top: 0.2rem;
    display: block;
    width: 100%;
    border: 1px solid var(--c-border-2);
    background-color: var(--c-bg-2);
    color: var(--c-text-1);
    border-radius: 0.3rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    transition: all 0.2s;
    padding: 0.3rem 0.5rem; 
    font-size: 0.75rem;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--c-primary-500);
    box-shadow: 0 0 0 2px var(--c-primary-100);
}
.form-textarea { resize: vertical; }

.form-checkbox, .form-radio {
    height: 0.8rem; width: 0.8rem;
    border-radius: 0.25rem;
    border-color: var(--c-border-2);
    color: var(--c-primary-600);
}
.form-checkbox:focus, .form-radio:focus { ring: var(--c-primary-500); }

.form-label {
    font-weight: 500;
    color: var(--c-text-1);
    display: block;
    font-size: 0.75rem;
}

.form-group {
    margin-bottom: 0.6rem;
}

.form-grid-2col {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.6rem; 
}
@media (min-width: 768px) {
    .form-grid-2col { grid-template-columns: repeat(2, 1fr); }
}

.form-grid-3col {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.6rem; 
}
@media (min-width: 768px) {
    .form-grid-3col { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .form-grid-3col { grid-template-columns: repeat(3, 1fr); }
}

.form-grid-4col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
}
@media (min-width: 1024px) {
    .form-grid-4col { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .lg-col-span-2 {
        grid-column: span 2 / span 2;
    }
}


/* Card */
.card {
    background-color: var(--c-bg-2);
    border-radius: 0.4rem;
    box-shadow: 0 1px 3px 0 var(--shadow-color);
    transition: all 0.2s ease-in-out;
    padding: 1rem;
}
.card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px -2px var(--shadow-color);
}
.card-header {
    padding-bottom: 0.6rem; 
    margin-bottom: 0.6rem; 
    border-bottom: 1px solid var(--c-border);
}

/* Loading Spinner */
.loading-spinner-container { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; color: var(--c-text-2); }
.loading-spinner-animation {
    animation: spin 1s linear infinite;
    border-radius: 50%;
    height: 2rem; width: 2rem;
    border-bottom: 2px solid var(--c-primary-600);
    margin-bottom: 0.8rem;
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.loading-spinner-text { font-size: 0.9rem; }

/* Alert */
.alert { padding: 0.5rem 0.8rem; border-radius: 0.3rem; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 1px 2px 0 var(--shadow-color); margin-bottom: 0.8rem; }
.alert-content { display: flex; align-items: center; }
.alert-icon { margin-right: 0.4rem; }
.alert-close-btn { margin-left: 0.8rem; padding: 0.2rem; border-radius: 50%; background: none; border: none; cursor: pointer; }
.alert-close-btn:hover { background-color: rgba(0,0,0,0.1); }
.alert-error { background-color: #fef2f2; color: #dc2626; } html.dark .alert-error { background-color: rgba(220, 38, 38, 0.2); color: #f87171; }
.alert-success { background-color: #f0fdf4; color: #16a34a; } html.dark .alert-success { background-color: rgba(22, 163, 74, 0.2); color: #4ade80; }
.alert-info { background-color: #eff6ff; color: #2563eb; } html.dark .alert-info { background-color: rgba(37, 99, 235, 0.2); color: #60a5fa; }

/* Modal & Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleUp { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-overlay {
    position: fixed; inset: 0; background-color: rgba(15, 23, 42, 0.75);
    display: none; align-items: center; justify-content: center;
    padding: 0.8rem; z-index: 50;
    animation: fadeIn 0.3s ease-out forwards;
}
.modal {
    background-color: var(--c-bg-2); border-radius: 0.4rem;
    box-shadow: 0 20px 40px -10px var(--shadow-color); padding: 1rem;
    width: 100%; max-height: 90vh;
    display: flex; flex-direction: column;
    animation: scaleUp 0.3s ease-out forwards;
}
.modal-sm { max-width: 28rem; }
.modal-md { max-width: 40rem; }
.modal-lg { max-width: 54rem; }
.modal-xl { max-width: 62rem; }
.modal-2xl { max-width: 70rem; }
.modal-4xl { max-width: 78rem; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.6rem; border-bottom: 1px solid var(--c-border); margin-bottom: 0.8rem; flex-shrink: 0; }
.modal-title { font-size: 1rem; font-weight: 600; color: var(--c-text-1); }
.modal-close-btn { color: var(--c-text-3); background: none; border: none; cursor: pointer; font-size: 1.25rem; line-height: 1; transition: color 0.2s; }
.modal-close-btn:hover { color: var(--c-text-1); }
.modal-body { overflow-y: auto; flex-grow: 1; padding-right: 0.4rem; margin-right: -0.4rem; scrollbar-width: thin; }
.modal-footer { text-align: right; border-top: 1px solid var(--c-border); padding-top: 0.8rem; flex-shrink: 0; display: flex; justify-content: flex-end; gap: 0.4rem; flex-wrap: wrap; }

/* Country Code Input */
.country-code-input { display: flex; }
.country-code-input .form-select { width: auto; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.country-code-input .form-input { margin-top: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }

/* Tabs */
.tabs { border-bottom: 1px solid var(--c-border); display: flex; gap: 0.6rem; flex-wrap: wrap;}
.tab-btn {
    padding: 0.3rem 0.6rem; 
    font-size: 0.75rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    background: none; border: none; cursor: pointer;
    color: var(--c-text-3);
}
.tab-btn:hover { color: var(--c-text-1); }
.tab-btn.active { color: var(--c-primary-600); border-color: var(--c-primary-600); }
.tab-content { display: none; margin-top: 1.5rem; }
.tab-content.active { display: block; animation: fadeIn 0.3s; }

/* 5. Larger Components
----------------------------------------------------------------*/

/* --- NEW & IMPROVED: Sliding Pill Sidebar --- */
:root {
    --gooey-sidebar-primary: var(--c-primary-600);
    --gooey-sidebar-text: var(--c-text-3);
    --gooey-sidebar-radius: 8px;
    --gooey-sidebar-spacer: 0.5rem;
    --gooey-sidebar-link-height: calc(var(--gooey-sidebar-spacer) * 4);
    --gooey-sidebar-timing: 250ms;
    /* JS-controlled variables */
    --_pill-top-offset: 0;
    --_pill-opacity: 0;
}

.sidebar {
    position: fixed;
    top: var(--gooey-sidebar-spacer);
    left: var(--gooey-sidebar-spacer);
    background: var(--c-bg-2);
    border-radius: var(--gooey-sidebar-radius);
    padding: var(--gooey-sidebar-spacer) 0;
    box-shadow: 0 0 30px var(--shadow-color);
    height: calc(100vh - (var(--gooey-sidebar-spacer) * 1));
    width: calc(var(--gooey-sidebar-spacer) * 5.9);
    transition: width var(--gooey-sidebar-timing) ease;
    z-index: 101;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sidebar::-webkit-scrollbar {
    width: 0px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--c-border-2);
    border-radius: 20px;
    border: 3px solid transparent;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--c-text-3);
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: none;
    transition: opacity 0.3s ease;
}
.app-container.sidebar-mobile-open .sidebar-overlay {
    display: block;
}

.sidebar-nav {
    position: relative;
    padding: 0;
}

.sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}


/* 1. The Sliding Pill */
.sidebar-nav ul::before {
    content: '';
    position: absolute;
    z-index: 0; /* Behind the links */
    left: var(--gooey-sidebar-spacer);
    width: calc(100% - (var(--gooey-sidebar-spacer) * 2));
    height: var(--gooey-sidebar-link-height);
    background: var(--gooey-sidebar-primary);
    border-radius: var(--gooey-sidebar-radius);
    
    /* Position and visibility are controlled by CSS variables from JS */
    top: calc(var(--_pill-top-offset) * var(--gooey-sidebar-link-height));
    opacity: var(--_pill-opacity, 0);
    
    transition: top var(--gooey-sidebar-timing) ease-in-out, opacity var(--gooey-sidebar-timing) ease-in-out;
}

/* 2. Icon and Link Styling (JS Controlled) */
.sidebar-link {
    position: relative;
    z-index: 1; /* Keep link above pill */
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--gooey-sidebar-link-height);
    width: 100%;
    text-decoration: none;
    
    /* Default state: grey, normal size */
    color: var(--gooey-sidebar-text);
    transition: color 250ms ease-in-out;
}

.sidebar-link.is-highlighted {
    color: #fff;
}

.sidebar-link svg {
    width: 15px;
    height: 15px;
    transform: scale(1);
    transition: transform 250ms ease-in-out;
}

.sidebar-link.is-highlighted svg {
    transform: scale(1.1);
}


/* 3. Tooltip (the span) */
.sidebar-link span {
    position: absolute;
    left: 100%;
    transform: translateX(calc(var(--gooey-sidebar-spacer) * -2));
    margin-left: var(--gooey-sidebar-spacer);
    opacity: 0;
    pointer-events: none;
    color: var(--c-primary-600);
    background: var(--c-bg-2);
    padding: calc(var(--gooey-sidebar-spacer) * 0.75);
    transition: transform var(--gooey-sidebar-timing) ease, opacity var(--gooey-sidebar-timing) ease;
    border-radius: calc(var(--gooey-sidebar-radius) * 1.5);
    white-space: nowrap;
    z-index: 102;
    box-shadow: 0 5px 15px var(--shadow-color);
}

.sidebar:not(:hover) .sidebar-link:focus span,
.sidebar-link:hover span {
    opacity: 1;
    transform: translate(0);
}
/* --- End Sliding Pill Sidebar --- */


/* Header */
.header {
    /* Card-like styling */
    background-color: var(--c-bg-2);
    border-radius: 0.4rem;
    box-shadow: 0 1px 3px 0 var(--shadow-color);
    
    /* Positioning as a floating card */
    position: fixed;
    top: var(--gooey-sidebar-spacer);
    left: calc(var(--gooey-sidebar-spacer) * 8);
    right: var(--gooey-sidebar-spacer); /* Add symmetrical spacing on the right */
    height: var(--header-height);
    z-index: 30;
    
    /* Internal layout */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.2rem;
    
    /* Animation */
    transition: all 0.3s ease;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.header-right-items {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.header-item { position: relative; }
.mobile-menu-button {
    display: none;
    background: none;
    border: none;
    color: var(--c-text-2);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 50%;
}
.mobile-menu-button:hover {
    background-color: var(--c-bg-3);
    color: var(--c-text-1);
}

.header-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 0.5rem;
    height: 36px;
    margin-left: 0.5rem;
}

.header-logo {
    display: flex;
    align-items: center;
    height: 100%;
}
.header-logo img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}
.header-logo .dark-logo { display: none; }
html.dark .header-logo .light-logo { display: none; }
html.dark .header-logo .dark-logo { display: block; }

.header-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-school-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text-1);
    white-space: nowrap;
    line-height: 1.2;
}

.header-school-tagline {
    font-size: 0.7rem;
    color: var(--c-text-3);
    white-space: nowrap;
    line-height: 1;
}


.header-theme-toggle {
    background: none;
    border: none;
    color: var(--c-text-2);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.header-theme-toggle:hover {
    background-color: var(--c-bg-3);
    color: var(--c-text-1);
}
.moon-icon { display: none; }
.sun-icon { display: block; }
html.dark .moon-icon { display: block; }
html.dark .sun-icon { display: none; }

.reminders-link {
    position: relative;
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
    color: var(--c-text-2);
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8rem;
    text-decoration: none;
}
.reminders-link:hover { background-color: #f1f5f9; text-decoration: none; }
html.dark .reminders-link:hover { background-color: var(--c-bg-3); }
.reminders-badge {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    background-color: #ef4444; /* red-500 */
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.3rem;
    border-radius: 9999px;
    line-height: 1;
}

.header-clock {
    color: var(--c-text-2);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.4rem 0.6rem;
    background-color: var(--c-bg-3);
    border-radius: 0.3rem;
    min-width: 160px;
    text-align: center;
    white-space: nowrap;
}

/* NEW: User Menu in Header */
.user-menu-container {
    position: relative;
}
.user-menu-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--c-bg-3);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    padding: 0.2rem 0.8rem 0.2rem 0.2rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.user-menu-button:hover,
.user-menu-button[aria-expanded="true"] {
    background-color: var(--c-border);
}
.user-avatar {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background-color: var(--c-primary-500);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}
.user-name {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--c-text-1);
}
.user-menu-chevron {
    color: var(--c-text-3);
    transition: transform 0.2s;
}
.user-menu-button[aria-expanded="true"] .user-menu-chevron {
    transform: rotate(180deg);
}
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background-color: var(--c-bg-2);
    border-radius: 0.4rem;
    box-shadow: 0 4px 12px -2px var(--shadow-color);
    border: 1px solid var(--c-border);
    z-index: 102;
    min-width: 160px;
    padding: 0.4rem;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.user-menu-dropdown.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.3rem;
    font-size: 0.8rem;
    color: var(--c-text-2);
    text-decoration: none;
    font-weight: 500;
}
.user-menu-item:hover {
    background-color: var(--c-bg-3);
    color: var(--c-text-1);
    text-decoration: none;
}
.user-menu-item svg {
    width: 1rem;
    height: 1rem;
}

/* Crud Manager & Tables */
.crud-search-container {
    margin-bottom: 0.8rem;
    background-color: var(--c-bg-2);
    padding: 0.6rem; 
    border-radius: 0.4rem;
    box-shadow: 0 1px 2px 0 var(--shadow-color);
}
.search-input-wrapper {
    position: relative;
}
.search-input-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-3);
}
.search-input {
    padding-left: 2rem !important;
    margin-top: 0 !important;
}
.table-container {
    background-color: var(--c-bg-2);
    box-shadow: 0 1px 3px 0 var(--shadow-color);
    border-radius: 0.4rem;
    overflow-x: auto;
    border: 1px solid var(--c-border);
}
.table {
    width: 100%;
    text-align: left;
    color: var(--c-text-2);
    border-collapse: collapse;
    font-size: 0.75rem;
}
.table thead {
    font-size: 0.65rem;
    color: var(--c-text-1);
    text-transform: uppercase;
    background-color: #f1f5f9; /* slate-100 */
}
html.dark .table thead {
    background-color: var(--c-bg-3);
    color: var(--c-text-2);
}
.table th { cursor: pointer; white-space: nowrap; padding: 0.5rem 0.8rem; }
.table td { padding: 0.5rem 0.8rem; }
.table th .sort-indicator { display: flex; align-items: center; gap: 0.2rem; }
.table tbody tr { border-bottom: 1px solid var(--c-border); transition: background-color 0.2s ease-in-out; }
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background-color: #f8fafc; }
html.dark .table tbody tr:hover { background-color: rgba(51, 65, 85, 0.5); }
.table td { vertical-align: middle; } 
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.2rem; white-space: nowrap; } 
.table-action-btn { padding: 0.3rem; border-radius: 50%; background: none; border: none; cursor: pointer; color: var(--c-text-3); transition: all 0.2s; } 
.table-action-btn svg { width: 1rem; height: 1rem; }
.table-action-btn:hover { background-color: #e2e8f0; color: var(--c-text-1); transform: scale(1.1); }
html.dark .table-action-btn:hover { background-color: var(--c-bg-3); }
.text-right { text-align: right; }

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem; 
    border-top: 1px solid var(--c-border);
}
.pagination-btn {
    padding: 0.3rem; 
    border-radius: 50%;
    background-color: #f1f5f9;
    border: none;
    cursor: pointer;
}
.pagination-btn:hover:not(:disabled) { background-color: #e2e8f0; }
.pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }
html.dark .pagination-btn { background-color: var(--c-bg-3); }
html.dark .pagination-btn:hover:not(:disabled) { background-color: #475569; }
.pagination-text { font-size: 0.75rem; font-weight: 500; }

/* 6. Page-specific styles
----------------------------------------------------------------*/

/* Customer Page Filters */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.8rem;
    background-color: var(--c-bg-2);
    border-radius: 0.4rem;
    margin-bottom: 0.8rem;
    border: 1px solid var(--c-border);
}
.filter-group {
    flex-grow: 1;
}
.filter-group .form-label {
    font-size: 0.7rem;
}
.filter-group .form-input,
.filter-group .form-select {
    margin-top: 0;
}
.filter-buttons {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
}

/* Status Badge */
.status-badge {
    padding: 0.1rem 0.5rem; 
    font-size: 0.65rem; 
    font-weight: 600;
    border-radius: 9999px;
    display: inline-block;
}
.status-badge-active, .status-badge-open, .status-badge-in_progress { background-color: #e0f2fe; color: #0369a1; } html.dark .status-badge-active, html.dark .status-badge-open, html.dark .status-badge-in_progress { background-color: rgba(2, 132, 199, 0.2); color: #7dd3fc; }
.status-badge-completed, .status-badge-qualified, .status-badge-converted { background-color: #dcfce7; color: #15803d; } html.dark .status-badge-completed, html.dark .status-badge-qualified, html.dark .status-badge-converted { background-color: rgba(22, 163, 74, 0.2); color: #86efac; }
.status-badge-dropped, .status-badge-lost { background-color: #fee2e2; color: #b91c1c; } html.dark .status-badge-dropped, html.dark .status-badge-lost { background-color: rgba(185, 28, 28, 0.2); color: #fca5a5; }
.status-badge-paid { background-color: #dcfce7; color: #15803d; } html.dark .status-badge-paid { background-color: rgba(22, 163, 74, 0.2); color: #86efac; }
.status-badge-void { background-color: #e5e7eb; color: #4b5563; } html.dark .status-badge-void { background-color: #4b5563; color: #d1d5db; }
.status-badge-overdue { background-color: #fee2e2; color: #b91c1c; } html.dark .status-badge-overdue { background-color: rgba(185, 28, 28, 0.2); color: #fca5a5; }
.status-badge-partially-paid, .status-badge-in-maintenance { background-color: #fef3c7; color: #b45309; } html.dark .status-badge-partially-paid, html.dark .status-badge-in-maintenance { background-color: rgba(217, 119, 6, 0.2); color: #fcd34d; }
.status-badge-pending, .status-badge-new, .status-badge-contacted, .status-badge-draft, .status-badge-sold { background-color: #f3f4f6; color: #374151; } html.dark .status-badge-pending, html.dark .status-badge-new, html.dark .status-badge-contacted, html.dark .status-badge-draft, html.dark .status-badge-sold { background-color: #4b5563; color: #d1d5db; }


/* Dashboard */
.dashboard-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}
@media (min-width: 1024px) {
    .dashboard-layout {
        grid-template-columns: 2fr 1fr;
    }
}
.dashboard-main, .dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.stat-cards-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.stat-card {
    padding: 0.6rem;
    border-radius: 0.4rem;
    box-shadow: 0 1px 3px 0 var(--shadow-color);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--c-bg-2);
}
.stat-card-icon {
    padding: 0.4rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-card-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}
.stat-card-content {
    flex: 1;
}
.stat-card-title {
    font-size: 0.65rem;
    color: var(--c-text-2);
}
.stat-card-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text-1);
}

/* Quick Actions */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    text-align: center;
}
.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 0.4rem;
    background-color: var(--c-bg-3);
    border: 1px solid var(--c-border);
    border-radius: 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--c-text-1);
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
}
.quick-action-btn:hover {
    background-color: var(--c-border);
    border-color: var(--c-border-2);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px var(--shadow-color);
}
.quick-action-btn svg {
    width: 1.3rem;
    height: 1.3rem;
    margin-bottom: 0.4rem;
    color: var(--c-primary-600);
}


/* Stat Card Colors */
.stat-card-blue .stat-card-icon { background-color: #e0f2fe; color: #3b82f6; } html.dark .stat-card-blue .stat-card-icon { background-color: rgba(59, 130, 246, 0.1); }
.stat-card-green .stat-card-icon { background-color: #dcfce7; color: #22c55e; } html.dark .stat-card-green .stat-card-icon { background-color: rgba(34, 197, 94, 0.1); }
.stat-card-yellow .stat-card-icon { background-color: #fef9c3; color: #eab308; } html.dark .stat-card-yellow .stat-card-icon { background-color: rgba(234, 179, 8, 0.1); }
.stat-card-cyan .stat-card-icon { background-color: #cffafe; color: #06b6d4; } html.dark .stat-card-cyan .stat-card-icon { background-color: rgba(6, 182, 212, 0.1); }
.stat-card-teal .stat-card-icon { background-color: #ccfbf1; color: #14b8a6; } html.dark .stat-card-teal .stat-card-icon { background-color: rgba(20, 184, 166, 0.1); }
.stat-card-amber .stat-card-icon { background-color: #fef3c7; color: #f59e0b; } html.dark .stat-card-amber .stat-card-icon { background-color: rgba(245, 158, 11, 0.1); }
.stat-card-red .stat-card-icon { background-color: #fee2e2; color: #ef4444; } html.dark .stat-card-red .stat-card-icon { background-color: rgba(239, 68, 68, 0.1); }
.stat-card-violet .stat-card-icon { background-color: #ede9fe; color: #8b5cf6; } html.dark .stat-card-violet .stat-card-icon { background-color: rgba(139, 92, 246, 0.1); }
.stat-card .profit { color: #22c55e; } .stat-card .loss { color: #ef4444; }

/* Dashboard Chart Container */
.dashboard-chart-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}
@media (min-width: 768px) {
    .dashboard-chart-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}
.chart-container {
    position: relative;
    height: 220px;
    width: 100%;
}


/* Action Center (Dashboard & Reminders Page) */
.action-center-list { list-style: none; padding: 0; margin: 0; }
.action-center-item { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem; border-radius: 0.4rem; transition: background-color 0.2s; }
.action-center-item + .action-center-item { border-top: 1px solid var(--c-border); }
.action-center-item:hover { background-color: var(--c-bg-3); }
.action-center-item-icon { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 0.2rem; }
.action-center-item-icon svg { width: 1rem; height: 1rem; }
.action-center-item-content { flex-grow: 1; }
.action-center-item-msg { font-weight: 600; font-size: 0.75rem; color: var(--c-text-1); }
.action-center-item-details { font-size: 0.65rem; color: var(--c-text-3); }

/* Reminder Icon Colors */
.reminder-icon-danger, .reminder-icon-red { background-color: #fee2e2; color: #ef4444; } html.dark .reminder-icon-danger, html.dark .reminder-icon-red { background-color: rgba(239, 68, 68, 0.2); color: #f87171; }
.reminder-icon-warning, .reminder-icon-amber { background-color: #fef3c7; color: #f59e0b; } html.dark .reminder-icon-warning, html.dark .reminder-icon-amber { background-color: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.reminder-icon-pink { background-color: #fce7f3; color: #db2777; } html.dark .reminder-icon-pink { background-color: rgba(219, 39, 119, 0.2); color: #f9a8d4; }
.reminder-icon-orange { background-color: #ffedd5; color: #f97316; } html.dark .reminder-icon-orange { background-color: rgba(249, 115, 22, 0.2); color: #fdba74; }
.reminder-icon-blue { background-color: #dbeafe; color: #3b82f6; } html.dark .reminder-icon-blue { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.reminder-icon-cyan { background-color: #cffafe; color: #06b6d4; } html.dark .reminder-icon-cyan { background-color: rgba(6, 182, 212, 0.2); color: #67e8f9; }
.reminder-icon-violet { background-color: #ede9fe; color: #8b5cf6; } html.dark .reminder-icon-violet { background-color: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
.reminder-icon-slate { background-color: #e2e8f0; color: #475569; } html.dark .reminder-icon-slate { background-color: #334155; color: #94a3b8; }
.reminder-icon-green { background-color: #dcfce7; color: #15803d; } html.dark .reminder-icon-green { background-color: rgba(22, 163, 74, 0.2); color: #86efac; }


/* Customer Profile -- NEW CREATIVE LAYOUT */
.profile-header-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}
.profile-header-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-grow: 1;
}
.profile-avatar-container {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: var(--c-primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-primary-600);
    font-size: 2rem;
    font-weight: 600;
    flex-shrink: 0;
}
.profile-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-text-1);
    margin-bottom: 0.25rem;
}
.profile-contact-info {
    color: var(--c-text-3);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.profile-contact-info span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.profile-contact-info svg {
    width: 0.9rem;
    height: 0.9rem;
}
.profile-header-meta {
    font-size: 0.8rem;
    text-align: left;
    flex-shrink: 0;
}
.profile-header-meta p {
    margin-bottom: 0.25rem;
}
.profile-header-actions {
    display: flex;
    gap: 0.5rem;
    align-self: flex-start;
}

/* Financial Stats Grid for Profile Page */
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.profile-stats-grid .stat-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    gap: 0.2rem;
}
.profile-stats-grid .stat-card-title {
    font-size: 0.8rem;
    font-weight: 600;
}
.profile-stats-grid .stat-card-value {
    font-size: 1.8rem;
}
.profile-stats-grid .stat-card-value.profit { color: var(--c-green-600); }
.profile-stats-grid .stat-card-value.loss { color: var(--c-rose-600); }


/* License Details on Customer Profile */
.license-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
}
.license-card {
    background-color: var(--c-bg);
    border: 1px solid var(--c-border-2);
    border-radius: 0.5rem;
    padding: 1rem;
}
.license-card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--c-border);
}
.license-card-header svg {
    width: 2rem;
    height: 2rem;
    color: var(--c-primary-600);
}
.license-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-text-1);
}
.license-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.license-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}
.license-info-row .label {
    color: var(--c-text-3);
}
.license-info-row .value {
    font-weight: 600;
    color: var(--c-text-1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* RTO Progress Stepper */
.rto-progress-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    list-style: none;
    padding: 0.8rem 0;
    position: relative;
}
.rto-progress-stepper::before {
    content: '';
    position: absolute;
    top: 1rem; /* center of the icon */
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--c-border);
    z-index: -1;
}
.step {
    text-align: center;
    position: relative;
    width: 20%;
}
.step-icon-wrapper {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--c-bg-2);
    border: 2px solid var(--c-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.step-icon-wrapper svg {
    width: 1rem;
    height: 1rem;
    color: var(--c-text-3);
}
.step-label {
    font-size: 0.7rem;
    margin-top: 0.4rem;
    font-weight: 500;
    color: var(--c-text-3);
}
.step.active .step-icon-wrapper {
    background-color: var(--c-primary-500);
    border-color: var(--c-primary-500);
}
.step.active .step-icon-wrapper svg {
    color: white;
}
.step.active .step-label {
    color: var(--c-text-1);
}

/* Skill Progress Tracking */
.skill-list { list-style: none; padding: 0; margin: 0; }
.skill-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.2rem;
}
.skill-item:not(:last-child) {
    border-bottom: 1px solid var(--c-border);
}
.skill-item-name {
    font-weight: 500;
}
.skill-status-group {
    display: flex;
    gap: 0.8rem;
}
.skill-status-group label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    cursor: pointer;
}


/* Settings */
.settings-section { max-width: 48rem; }
.settings-section:not(:last-child) { margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--c-border); }

/* NEW: Theme Color Picker */
.theme-color-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}
.theme-color-label {
    position: relative;
    cursor: pointer;
}
.theme-color-label input[type="radio"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.theme-color-swatch {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 3px solid var(--c-bg-2);
    box-shadow: 0 0 0 1px var(--c-border-2);
    transition: all 0.2s ease;
}
.theme-color-label:hover .theme-color-swatch {
    transform: scale(1.1);
}
.theme-color-label input[type="radio"]:checked + .theme-color-swatch {
    box-shadow: 0 0 0 2px var(--c-bg-2), 0 0 0 4px var(--c-primary-500);
    transform: scale(1.1);
}
/* Individual swatch colors */
.color-swatch-sky    { background-color: var(--c-sky-500); }
.color-swatch-green  { background-color: var(--c-green-500); }
.color-swatch-rose   { background-color: var(--c-rose-500); }
.color-swatch-orange { background-color: var(--c-orange-500); }
.color-swatch-violet { background-color: var(--c-violet-500); }
.color-swatch-amber  { background-color: var(--c-amber-500); }

/* NEW: Theme Toggle Switch */
.theme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}
.theme-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.theme-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--c-border-2);
    transition: .4s;
    border-radius: 28px;
}
.theme-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.theme-toggle-switch input:checked + .theme-toggle-slider {
    background-color: var(--c-primary-600);
}
.theme-toggle-switch input:focus + .theme-toggle-slider {
    box-shadow: 0 0 1px var(--c-primary-600);
}
.theme-toggle-switch input:checked + .theme-toggle-slider:before {
    transform: translateX(22px);
}

.branding-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}
.branding-upload-container {
    width: 10rem; height: 5rem;
    border: 2px dashed var(--c-border-2);
    display: flex; align-items: center; justify-content: center;
    padding: 0.4rem;
    position: relative;
    cursor: pointer;
    border-radius: 0.3rem;
    transition: border-color 0.2s;
}
.branding-upload-container:hover { border-color: var(--c-primary-500); }
.branding-upload-container.dark-bg { background-color: #334155; }
.branding-upload-container.light-bg { background-color: #f8fafc; }
.branding-image { max-width: 100%; max-height: 100%; object-fit: contain; }
.branding-placeholder { text-align: center; font-size: 0.75rem; color: var(--c-text-3); }
.branding-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}


.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}
@media (min-width: 640px) {
    .checkbox-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Invoice Display */
.invoice-view-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}
@media (min-width: 1024px) {
    .invoice-view-grid { grid-template-columns: 2fr 1fr; }
}

.invoice-container {
    position: relative;
    background-color: var(--c-bg-2);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px var(--shadow-color);
}
.invoice-paid-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}
.invoice-paid-watermark span {
    font-size: 5rem;
    font-weight: 900;
    color: var(--c-green-500);
    opacity: 0.1;
    transform: rotate(-15deg);
    user-select: none;
}
@media (min-width: 768px) {
    .invoice-paid-watermark span { font-size: 8rem; }
}
.invoice-paper {
    padding: 1.2rem;
    position: relative;
    z-index: 2;
}
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; }
.invoice-header-left p { font-size: 0.8rem; }
.invoice-logo { max-width: 180px; max-height: 60px; height: auto; margin-bottom: 0.5rem; object-fit: contain;}
.invoice-school-name-fallback { font-size: 1.5rem; font-weight: 700; color: var(--c-text-1); margin-bottom: 0.5rem; }
.invoice-header-right { text-align: right; }
.invoice-header-right h2 { font-size: 2rem; font-weight: 800; margin-bottom: 1rem; }
.invoice-header-right p { font-size: 0.85rem; margin-bottom: 0.2rem; }
.invoice-billing-details { margin-top: 2rem; margin-bottom: 1.5rem; font-size: 0.85rem; }
.billing-details-title { font-size: 0.8rem; color: var(--c-text-3); text-transform: uppercase; margin-bottom: 0.4rem; }
.invoice-items-table { border-radius: 0.5rem; box-shadow: 0 0 0 1px var(--c-border); overflow: hidden; margin-top: 1.5rem;}
.invoice-items-table .table thead {
    background-color: #f1f5f9; /* slate-100 */
    color: #475569;
    text-transform: uppercase;
    font-size: 0.7rem;
}
html.dark .invoice-items-table .table thead {
    background-color: var(--c-bg-3);
    color: var(--c-text-2);
}
.invoice-items-table .table tbody tr:nth-child(even) { background-color: var(--c-bg-3); }
/* NEW: Professional Invoice Summary Grid */
.invoice-summary-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile first */
    gap: 1.2rem;
    margin-top: 1.5rem;
}
@media (min-width: 768px) {
    .invoice-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.payment-history-box, .invoice-summary-box {
    background-color: var(--c-bg-3);
    border: 1px solid var(--c-border);
    border-radius: 0.5rem;
    padding: 1rem;
}
.invoice-summary-box {
    position: relative; /* Needed for balance-due row positioning */
    overflow: hidden; /* Needed for balance-due row positioning */
}
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}
.summary-row.total { font-weight: 700; font-size: 1rem; color: var(--c-primary-700); border-top: 1px solid var(--c-border-2); padding-top: 0.75rem; margin-top: 0.75rem;}
html.dark .summary-row.total { color: var(--c-primary-300); }
.summary-row.balance-due {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--c-rose-700);
    background-color: var(--c-rose-100);
    padding: 0.75rem 1rem;
    margin: 1rem -1rem -1rem -1rem; /* Full width of parent */
    border-top: 1px solid var(--c-rose-300);
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
}
html.dark .summary-row.balance-due {
    background-color: rgba(225, 29, 72, 0.2);
    color: var(--c-rose-300);
    border-color: var(--c-rose-900);
}
.summary-row.paid { color: var(--c-green-600); }
.payment-history-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.payment-history-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--c-border-2);
}
.payment-history-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.payment-history-item .payment-amount {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--c-green-600);
    white-space: nowrap;
    margin-left: 1rem;
}
.invoice-footer { 
    display: flex;
    justify-content: flex-end;
    text-align: center; 
    margin-top: 1.5rem; 
}
.invoice-signature-area {
    height: 180px;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.invoice-signature-img { max-width: 180px; max-height: 180px; margin: 0 auto; object-fit: contain; z-index: 15; }
.invoice-signature-line { border-top: 1px solid var(--c-border-2); padding-top: 0.25rem; }
.invoice-signature-line p:first-child { font-weight: 600; color: var(--c-text-1); }
.invoice-signature-line p:last-child { font-size: 0.8rem; color: var(--c-text-3); }
.invoice-notes { font-size: 0.8rem; color: var(--c-text-3); padding: 1rem; border-top: 1px dashed var(--c-border-2); margin-top: 1rem; }

/* Invoice Modal Layout */
.invoice-modal-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 1.5rem;
}
@media (min-width: 864px) {
    .invoice-modal-grid {
        grid-template-columns: 3fr 2fr;
    }
}
.invoice-summary-sticky-box {
    position: -webkit-sticky;
    position: sticky;
    top: 1rem;
}

/* Invoice Actions Sidebar */
.invoice-actions-container .card { margin-bottom: 1rem; }

@media print {
    @page {
        size: A4;
        margin: 1.5cm; /* Use more of the page */
    }

    /* 1. Basic body reset */
    html, body {
        background: #fff !important; 
        color: #000 !important;
        font-size: 10pt; /* Optimal print font size */
        height: 100%;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* 2. Hide everything that isn't the invoice content */
    .sidebar, .sidebar-overlay, .header, .page-header, .invoice-print-controls, .invoice-actions-container {
        display: none !important;
    }

    /* 3. Reset the layout to make the invoice content take up the whole page */
    .app-container, .main-content, .page-content, .invoice-view-grid, .invoice-container {
        display: block !important;
        height: 100%;
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }
    .invoice-view-grid {
        grid-template-columns: 1fr;
    }

    /* 4. Implement flex layout to fill the page vertically */
    .invoice-paper {
        padding: 0 !important;
        background-color: #fff !important;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .invoice-items-table {
        flex-grow: 1; /* This makes the items table expand */
    }

    .invoice-footer {
        margin-top: auto !important; /* Pushes footer to the bottom */
    }
    
    /* 5. Fine-tune spacing for a compact look */
    .invoice-header, .invoice-billing-details, .invoice-items-table, .invoice-summary-grid {
        margin-bottom: 1rem !important;
        margin-top: 0 !important;
    }
    .invoice-header {
        margin-bottom: 1.5rem !important;
    }
    .summary-row {
        margin-bottom: 0.4rem !important;
        font-size: 0.8rem !important;
    }
    .summary-row.total {
        padding-top: 0.5rem !important;
        margin-top: 0.5rem !important;
    }
    .invoice-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    /* 6. Handle the watermark and colors */
    .invoice-paid-watermark {
        z-index: 1 !important;
    }
    .invoice-paid-watermark span {
        color: #16a34a !important;
        opacity: 0.1 !important;
    }
    .invoice-summary-box {
        background-color: transparent !important;
        border: 1px solid #ddd !important;
    }
    .invoice-items-table .table tbody tr:nth-child(even) {
        background-color: #f8fafc !important;
    }
    html, html.dark {
        --c-bg: #fff;
        --c-bg-2: #fff;
        --c-bg-3: #f8fafc;
        --c-text-1: #000;
        --c-text-2: #333;
        --c-text-3: #555;
        --c-border: #e2e8f0;
        --c-border-2: #cbd5e1;
        /* Force theme colors to black for printing */
        --c-primary-700: #000;
        --c-rose-600: #000;
        --c-green-600: #000;
    }
}


/* Bulk Sender */
.bulk-sender-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}
@media (min-width: 1024px) {
    .bulk-sender-grid { grid-template-columns: 1fr 2fr; }
}

.recipient-list-container {
    margin-top: 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 0.4rem;
    padding-top: 0.6rem;
    height: 350px;
    overflow-y: auto;
}
.recipient-item {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
}
.recipient-item:hover {
    background-color: var(--c-bg-3);
}
.recipient-item input { margin-right: 0.6rem; }

/* Reports Page */
.report-controls {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
    align-items: center;
    flex-wrap: wrap;
}
.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.8rem;
}

/* NEW: Performance Comparison Cards on Reports Page */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}

.comparison-card {
    background-color: var(--c-bg-2);
    border-radius: 0.4rem;
    box-shadow: 0 1px 3px 0 var(--shadow-color);
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.comparison-card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-text-2);
    margin-bottom: 0.5rem;
}

.comparison-card-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--c-text-1);
    margin-bottom: 1rem;
    line-height: 1.2;
    flex-grow: 1; /* Pushes rows to the bottom */
}

.comparison-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--c-text-3);
    padding-top: 0.5rem;
    border-top: 1px solid var(--c-border);
}
.comparison-row + .comparison-row {
    margin-top: 0.5rem;
}


.change-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
}

.change-indicator.positive {
    color: var(--c-green-700);
    background-color: var(--c-green-100);
}
html.dark .change-indicator.positive {
    background-color: rgba(34, 197, 94, 0.2);
    color: var(--c-green-300);
}

.change-indicator.negative {
    color: var(--c-rose-700);
    background-color: var(--c-rose-100);
}
html.dark .change-indicator.negative {
    background-color: rgba(225, 29, 72, 0.2);
    color: var(--c-rose-300);
}


/* Customer Documents */
.document-upload-form {
    display: flex;
    gap: 0.8rem;
    align-items: flex-end;
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--c-border);
}
.document-upload-form .form-group {
    flex-grow: 1;
    margin-bottom: 0;
}
.document-list {
    list-style: none;
}
.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem;
    border-radius: 0.3rem;
}
.document-item:hover {
    background-color: var(--c-bg-3);
}
.document-item-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.document-item-name svg {
    color: var(--c-text-3);
}

/* Lead Interaction History */
.interaction-history {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--c-border);
    border-radius: 0.3rem;
    padding: 0.6rem;
    margin-top: 0.8rem;
    background-color: var(--c-bg-3);
}
.interaction-item {
    padding-bottom: 0.4rem;
    margin-bottom: 0.4rem;
}
.interaction-item:not(:last-child){
    border-bottom: 1px dashed var(--c-border-2);
}
.interaction-item p {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.75rem;
}
.interaction-item small {
    color: var(--c-text-3);
    font-size: 0.65rem;
}

/* Lead Temperature & New Modal Styles */
.lead-temp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 9999px;
}
.lead-temp-badge svg { width: 10px; height: 10px; }
.lead-temp-badge.temp-hot { background-color: var(--c-rose-100); color: var(--c-rose-700); }
html.dark .lead-temp-badge.temp-hot { background-color: rgba(225, 29, 72, 0.2); color: #fda4af; }
.lead-temp-badge.temp-warm { background-color: var(--c-amber-100); color: var(--c-amber-700); }
html.dark .lead-temp-badge.temp-warm { background-color: rgba(217, 119, 6, 0.2); color: #fcd34d; }
.lead-temp-badge.temp-cold { background-color: var(--c-sky-100); color: var(--c-sky-700); }
html.dark .lead-temp-badge.temp-cold { background-color: rgba(2, 132, 199, 0.2); color: #7dd3fc; }

.modal-lead-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}
@media (min-width: 1024px) {
    .modal-lead-grid { grid-template-columns: 3fr 2fr; }
}

.activity-feed-container {
    background-color: var(--c-bg);
    border-radius: 0.4rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.activity-feed-header {
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-text-1);
    border-bottom: 1px solid var(--c-border);
}
.activity-feed-display {
    padding: 0.8rem;
    overflow-y: auto;
    flex-grow: 1;
    max-height: 350px;
}
.activity-item {
    display: flex;
    gap: 0.6rem;
}
.activity-item:not(:last-child) {
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px dashed var(--c-border-2);
}
.activity-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: var(--c-bg-2);
    color: var(--c-text-2);
}
.activity-icon svg {
    width: 1rem;
    height: 1rem;
}
.activity-content p {
    margin: 0;
    font-size: 0.75rem;
    white-space: pre-wrap;
    color: var(--c-text-1);
}
.activity-content .activity-meta {
    font-size: 0.7rem;
    color: var(--c-text-3);
    margin-bottom: 0.2rem;
}
.outcome-badge {
    padding: 0.1rem 0.4rem;
    font-size: 0.6rem;
    font-weight: 600;
    border-radius: 9999px;
    margin-left: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.outcome-badge svg { width: 8px; height: 8px; }
.outcome-interested { background-color: var(--c-green-100); color: var(--c-green-700); }
html.dark .outcome-interested { background-color: rgba(34, 197, 94, 0.2); color: #86efac; }
.outcome-not-interested { background-color: var(--c-rose-100); color: var(--c-rose-700); }
html.dark .outcome-not-interested { background-color: rgba(225, 29, 72, 0.2); color: #fda4af; }
.outcome-call-back-later { background-color: var(--c-sky-100); color: var(--c-sky-700); }
html.dark .outcome-call-back-later { background-color: rgba(2, 132, 199, 0.2); color: #7dd3fc; }
.outcome-not-answering { background-color: var(--c-amber-100); color: var(--c-amber-700); }
html.dark .outcome-not-answering { background-color: rgba(217, 119, 6, 0.2); color: #fcd34d; }


.log-interaction-form {
    padding: 0.8rem;
    border-top: 1px solid var(--c-border);
    background-color: var(--c-bg-2);
}
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.btn-group-item {
    padding: 0.3rem 0.5rem;
    font-size: 0.7rem;
    gap: 0.2rem;
    background-color: var(--c-bg);
    color: var(--c-text-2);
    border: 1px solid var(--c-border);
}
.btn-group-item:hover:not(.selected) {
    background-color: var(--c-border);
}
.btn-group-item.selected {
    background-color: var(--c-primary-600);
    color: white;
    border-color: var(--c-primary-600);
    box-shadow: none;
}

/* KANBAN BOARD STYLES */
.kanban-board {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    padding-bottom: 0.8rem; /* For scrollbar */
    min-height: 450px;
}
.kanban-column {
    flex: 1 0 260px; /* Flex-grow, flex-shrink, flex-basis */
    max-width: 280px;
    background-color: var(--c-bg);
    border-radius: 0.4rem;
    display: flex;
    flex-direction: column;
}
.kanban-column-header {
    padding: 0.6rem 0.8rem;
    font-weight: 600;
    border-bottom: 2px solid var(--c-border);
    color: var(--c-text-1);
    display: flex;
    justify-content: space-between;
}
.kanban-card-container {
    padding: 0.4rem;
    flex-grow: 1;
    overflow-y: auto;
    min-height: 100px;
    transition: background-color 0.2s ease;
}
.kanban-column.drag-over .kanban-card-container {
    background-color: var(--c-primary-100);
}
.kanban-card {
    background-color: var(--c-bg-2);
    border-radius: 0.3rem;
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    box-shadow: 0 1px 2px 0 var(--shadow-color);
    cursor: grab;
    border-left: 3px solid transparent;
    transition: box-shadow 0.2s ease;
}
.kanban-card.temp-hot { border-left-color: var(--c-rose-500); }
.kanban-card.temp-warm { border-left-color: var(--c-amber-500); }
.kanban-card.temp-cold { border-left-color: var(--c-sky-500); }
.kanban-card:hover {
    box-shadow: 0 3px 5px -1px var(--shadow-color);
}
.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(3deg);
}
.kanban-card h4 {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.kanban-card p {
    font-size: 0.75rem;
    color: var(--c-text-3);
}

/* NEW: Interactive Reminders Page Styles */
.reminder-group {
    margin-bottom: 1.2rem;
}
.reminder-group-title {
    font-size: 0.9rem;
    font-weight: 600;
    padding-bottom: 0.4rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--c-border);
}
.reminder-card {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.8rem;
    background-color: var(--c-bg-2);
    border-radius: 0.4rem;
    border: 1px solid var(--c-border);
    box-shadow: 0 1px 2px 0 var(--shadow-color);
    transition: all 0.2s ease;
}
.reminder-card + .reminder-card {
    margin-top: 0.8rem;
}
.reminder-card:hover {
    border-color: var(--c-primary-300);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px -2px var(--shadow-color);
}
.reminder-card.dismissed {
    opacity: 0;
    transform: translateX(-50px);
}
.reminder-card-icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.2rem;
}
.reminder-card-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}
.reminder-card-content {
    flex-grow: 1;
}
.reminder-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-end;
}
.reminder-card-actions .btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
}

/* NEW: Reminder Group Collapse Styles */
.reminder-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.2rem 0.5rem;
    border-radius: 0.3rem;
    cursor: pointer;
    margin-bottom: 0.8rem;
    transition: background-color 0.2s;
}
.reminder-group-header:hover {
    background-color: var(--c-bg-3);
}
.reminder-group-header .reminder-group-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
}
.reminder-group-header .chevron-icon {
    transition: transform 0.3s ease-in-out;
    color: var(--c-text-3);
}
.reminder-group-header.expanded .chevron-icon {
    transform: rotate(180deg);
}
.collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-in-out;
}
.collapsible-content > div {
    overflow: hidden;
}
.collapsible-content.expanded {
    grid-template-rows: 1fr;
}


/* 7. NEW: WhatsApp Template Editor Styles
----------------------------------------------------------------*/
.template-group {
    break-inside: avoid;
    margin-bottom: 1rem;
}
.variations-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.variation-input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.variation-input-group .form-textarea {
    margin-top: 0;
    resize: none;
    height: 60px;
}
.add-variation-btn {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}
.remove-variation-btn {
    padding: 0.3rem;
    flex-shrink: 0;
}
.emoji-picker-btn {
    padding: 0.3rem;
    flex-shrink: 0;
}

.placeholder-btn-wrapper {
    position: relative;
}
.placeholder-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background-color: var(--c-bg-2);
    border: 1px solid var(--c-border-2);
    border-radius: 0.3rem;
    box-shadow: 0 4px 6px -1px var(--shadow-color);
    z-index: 10;
    display: none;
    max-height: 200px;
    min-width: 180px;
    overflow-y: auto;
}
.placeholder-dropdown.active { display: block; }
.placeholder-item {
    display: block; width: 100%;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    text-align: left; background: none; border: none;
    cursor: pointer; color: var(--c-text-2);
    white-space: nowrap;
}
.placeholder-item:hover { background-color: var(--c-bg-3); color: var(--c-text-1); }

.emoji-picker-popup {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background-color: var(--c-bg-2);
    border: 1px solid var(--c-border-2);
    border-radius: 0.3rem;
    box-shadow: 0 4px 6px -1px var(--shadow-color);
    z-index: 10;
    display: none;
    padding: 0.5rem;
    display: none;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.25rem;
    width: 160px;
}
.emoji-picker-popup.active { display: grid; }
.emoji-item {
    background: none;
    border: none;
    font-size: 1.25rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
}
.emoji-item:hover {
    background-color: var(--c-bg-3);
}

/* 8. NEW: Empty State Styles
----------------------------------------------------------------*/
.empty-state-container {
    background-color: var(--empty-state-bg);
    border: 1px dashed var(--c-border-2);
    border-radius: 0.5rem;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
}
.empty-state-art {
    max-width: 150px;
    margin: 0 auto 1.5rem;
}
.empty-state-art .bg {
    fill: var(--empty-state-art-bg);
}
.empty-state-art .fg {
    fill: var(--empty-state-art-fg);
}
.empty-state-art .primary {
    fill: var(--c-primary-500);
}
.empty-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-text-1);
    margin-bottom: 0.25rem;
}
.empty-state-message {
    color: var(--c-text-2);
    max-width: 400px;
    margin: 0 auto 1rem;
}
/* Invoice Modal Column Layout Fix */
.invoice-modal-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 1.5rem;
}
@media (min-width: 800px) { /* Adjust breakpoint for two columns */
    .invoice-modal-grid {
        grid-template-columns: 3fr 2fr;
    }
}
.invoice-summary-sticky-box {
    position: -webkit-sticky;
    position: sticky;
    top: 1rem;
}


/* 9. NEW: Toast Notifications
----------------------------------------------------------------*/
@keyframes toast-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-out-right {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

#toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 100%;
    max-width: 380px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem;
    background-color: var(--c-bg-2);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
    animation: toast-in-right 0.5s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
    pointer-events: auto;
    border: 1px solid transparent;
}

.toast.hiding {
    animation: toast-out-right 0.5s ease-in forwards;
}

.toast-icon {
    width: 24px;
    height: 24px;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.toast-message {
    font-weight: 500;
    font-size: 0.875rem;
}

.toast-success {
    background-color: var(--c-green-100);
    color: var(--c-green-900);
    border-color: var(--c-green-300);
}

html.dark .toast-success {
    background-color: #14532d;
    color: var(--c-green-100);
    border-color: var(--c-green-700);
}

.toast-success .toast-icon {
    color: var(--c-green-600);
}

.toast-error {
    background-color: var(--c-rose-100);
    color: var(--c-rose-900);
    border-color: var(--c-rose-300);
}

html.dark .toast-error {
    background-color: #881337;
    color: var(--c-rose-100);
    border-color: var(--c-rose-700);
}

.toast-error .toast-icon {
    color: var(--c-rose-600);
}

/* 10. NEW: Workflow Styles
----------------------------------------------------------------*/
.workflow-step-editor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.workflow-step-editor .form-input { margin-top: 0; }
.workflow-step-editor .due-days-input-group { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0;}
.workflow-step-editor .due-days-input-group input { width: 60px; }
.workflow-step-editor .btn-danger { padding: 0.3rem; flex-shrink: 0; }

.workflow-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.2rem;
}

.workflow-card {
    background-color: var(--c-bg);
    border: 1px solid var(--c-border-2);
    border-radius: 0.5rem;
    padding: 1rem;
}
.workflow-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.workflow-title {
    font-size: 1rem;
    font-weight: 600;
}
.progress-bar-container {
    width: 100%;
    background-color: var(--c-border);
    border-radius: 999px;
    height: 8px;
    margin: 0.5rem 0 1rem 0;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background-color: var(--c-primary-600);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.task-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.4rem;
    border-radius: 0.3rem;
    transition: background-color 0.2s;
    cursor: pointer;
    justify-content: space-between;
}
.task-item label:hover {
    background-color: var(--c-bg-3);
}
.task-item input[type="checkbox"]:checked + span {
    text-decoration: line-through;
    color: var(--c-text-3);
}
.task-item .task-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.task-item .task-due-date {
    font-size: 0.7rem;
    color: var(--c-text-3);
    white-space: nowrap;
}
.task-item.task-overdue .task-title,
.task-item.task-overdue .task-due-date {
    color: var(--c-rose-600);
    font-weight: 600;
}

/* 11. NEW: GMB Hub & Live Inbox Styles
----------------------------------------------------------------*/
/* GMB Hub Styles */
.gmb-responder-title svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--c-amber-500);
}
.gmb-hub-layout {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.gmb-responder-area, .gmb-sidebar-area {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.gmb-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.gmb-reply-preview {
    background-color: var(--c-bg);
    border: 1px solid var(--c-border-2);
    border-radius: 0.5rem;
    padding: 1rem;
    animation: fadeIn 0.5s ease;
}
.gmb-reply-preview-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.gmb-reply-school-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--c-bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.gmb-reply-school-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.gmb-reply-school-name {
    font-weight: 600;
    color: var(--c-text-1);
}
.gmb-reply-school-meta {
    font-size: 0.75rem;
    color: var(--c-text-3);
}
.gmb-reply-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}
.gmb-quick-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    border-radius: 0.4rem;
    text-decoration: none;
    color: var(--c-text-2);
    transition: background-color 0.2s ease;
    border: 1px solid var(--c-border);
}
.gmb-quick-link:hover {
    background-color: var(--c-bg-3);
    color: var(--c-text-1);
    text-decoration: none;
}
.gmb-quick-link svg {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--c-primary-600);
    flex-shrink: 0;
}
.gmb-quick-link-text strong {
    color: var(--c-text-1);
    font-weight: 600;
}
 .gmb-quick-link-text span {
    font-size: 0.75rem;
}
#gmb-generate-btn .loading-spinner-animation {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
    margin-bottom: 0;
}

/* WhatsApp Inbox Styles */
.inbox-layout {
    display: flex;
    height: calc(100vh - var(--header-height) - (var(--gooey-sidebar-spacer) * 2) - 4rem);
    gap: 1.2rem;
    background-color: var(--c-bg-2);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 var(--shadow-color);
}
.inbox-sidebar {
    width: 320px;
    flex-shrink: 0;
    border-right: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
}
.inbox-sidebar-header {
    padding: 0.8rem;
    border-bottom: 1px solid var(--c-border);
}
.inbox-sidebar-header input {
    width: 100%;
}
.conversation-list {
    flex-grow: 1;
    overflow-y: auto;
}
.conversation-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    cursor: pointer;
    border-bottom: 1px solid var(--c-border);
}
.conversation-item:hover {
    background-color: var(--c-bg);
}
.conversation-item.active {
    background-color: var(--c-primary-100);
}
html.dark .conversation-item.active {
    background-color: rgba(var(--c-primary-500), 0.1);
}
.conversation-avatar {
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background-color: var(--c-primary-100);
    display: flex; align-items: center; justify-content: center;
    color: var(--c-primary-600);
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}
.conversation-avatar img { width: 100%; height: 100%; object-fit: cover; }
.conversation-details {
    flex-grow: 1;
    overflow: hidden;
    min-width: 0;
}
.conversation-details-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.conversation-name {
    font-weight: 600;
    color: var(--c-text-1);
}
.conversation-time {
    font-size: 0.7rem;
    color: var(--c-text-3);
}
.conversation-preview {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--c-text-2);
}
.chat-window {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.chat-header {
    padding: 0.8rem;
    border-bottom: 1px solid var(--c-border);
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.chat-contact-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text-1);
}
.message-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.message-bubble {
    max-width: 70%;
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    line-height: 1.5;
}
.message-bubble.inbound {
    background-color: var(--c-bg);
    border-bottom-left-radius: 0.2rem;
    align-self: flex-start;
}
.message-bubble.outbound {
    background-color: var(--c-primary-600);
    color: white;
    border-bottom-right-radius: 0.2rem;
    align-self: flex-end;
}
.message-bubble p {
    margin: 0;
    font-size: 0.85rem;
    white-space: pre-wrap;
}
.chat-input-area {
    padding: 0.8rem;
    border-top: 1px solid var(--c-border);
}
#message-form {
    display: flex;
    gap: 0.8rem;
}
#message-form .form-input {
    margin: 0;
}
#chat-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--c-text-3);
}
#chat-placeholder svg {
    width: 4rem; height: 4rem;
    margin-bottom: 1rem;
    color: var(--c-border-2);
}
#send-message-btn .loading-spinner-animation {
    width: 1rem;
    height: 1rem;
    margin: 0;
    border-width: 2px;
}

/* NEW: Styles for Courses & Services cards */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.2rem;
}

.course-card, .service-card {
    display: flex;
    flex-direction: column;
    background-color: var(--c-bg-2);
    border-radius: 0.4rem;
    box-shadow: 0 1px 3px 0 var(--shadow-color);
    transition: all 0.2s ease-in-out;
    padding: 1rem;
}
.course-card:hover, .service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px -2px var(--shadow-color);
}

.course-card-header, .service-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 0.8rem;
    margin-bottom: 0.8rem;
}
.course-card-title, .service-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-text-1);
    margin-right: 0.5rem;
}
.course-card-description, .service-card-description {
    font-size: 0.8rem;
    color: var(--c-text-2);
    flex-grow: 1;
    margin-bottom: 1rem;
    line-height: 1.5;
}
.course-card-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    border-top: 1px solid var(--c-border);
    padding-top: 0.8rem;
    margin-top: auto;
}
.course-stat {
    text-align: center;
}
.course-stat span {
    display: block;
    font-size: 0.7rem;
    color: var(--c-text-3);
    text-transform: uppercase;
}
.course-stat strong {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text-1);
}
.service-workflow-preview {
    margin-top: auto;
    background-color: var(--c-bg);
    border-radius: 0.3rem;
    padding: 0.8rem;
}
.service-workflow-preview h6 {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--c-text-1);
}
.service-workflow-preview ul {
    list-style-type: none;
    padding-left: 0;
    font-size: 0.75rem;
    color: var(--c-text-2);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.service-workflow-preview li {
    display: flex;
    align-items: center;
}
.service-workflow-preview li svg {
    width: 12px;
    height: 12px;
    margin-right: 0.5rem;
    color: var(--c-primary-500);
    flex-shrink: 0;
}
.service-workflow-preview p {
    font-size: 0.75rem;
    color: var(--c-text-3);
    text-align: center;
}


/* 12. Mobile Responsiveness
----------------------------------------------------------------*/
@media (max-width: 1023px) {
    .page-content {
        padding: 0.8rem 0.8rem;
    }
    .page-header {
        flex-wrap: wrap;
    }
    .page-header-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .page-title {
        font-size: 1.2rem;
    }
    .modal-lg, .modal-xl, .modal-2xl, .modal-4xl {
        max-width: 95%;
        padding: 0.8rem;
    }
    .modal-body {
      max-height: 75vh;
    }
    .header {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
    
    /* Hide text on header action buttons for tablet & mobile */
    .btn-text-mobile-hide {
        display: none;
    }
    .page-header-actions .btn {
        padding: 0.4rem; /* Make it squarer for icon-only */
        min-width: 34px; /* Ensure a minimum size */
        min-height: 34px;
    }
    .page-header-actions .btn svg {
        width: 1.1rem; /* Slightly larger icon */
        height: 1.1rem;
    }
}

@media (max-width: 767px) {
    /* Make hamburger visible and adjust layout */
    .mobile-menu-button {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .main-content-wrapper {
        margin-left: 0;
        padding-bottom: 1rem;
    }
    .header {
        left: var(--gooey-sidebar-spacer);
        right: var(--gooey-sidebar-spacer);
    }
    .header-logo-link {
        margin-left: 0;
    }
    .header-school-name {
        font-size: 1rem;
    }

    /* --- SLIDE-IN SIDEBAR STYLING --- */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 5px 0 15px var(--shadow-color);
        padding-top: 1rem;
        z-index: 101;
        justify-content: flex-start;
        border-radius: 0;
    }

    .app-container.sidebar-mobile-open .sidebar {
        transform: translateX(0);
    }
    
    /* Remove gooey effect and adjust nav for vertical list */
    .sidebar-nav ul::before {
        display: none;
    }
    .sidebar-nav, .sidebar-nav ul {
        flex-direction: column;
        width: 100%;
        height: auto;
    }
    .sidebar-nav li {
        width: 100%;
    }
    
    /* Adjust sidebar links for mobile view */
    .sidebar-link {
        flex-direction: row;
        justify-content: flex-start;
        height: auto;
        padding: 0.8rem 1rem;
        gap: 0.8rem;
        border-radius: 0;
    }
    .sidebar-link:hover, .sidebar-link.active {
        background-color: var(--c-primary-100);
        color: var(--c-primary-600);
    }
    html.dark .sidebar-link:hover, html.dark .sidebar-link.active {
        background-color: var(--c-bg-3);
        color: var(--c-primary-300);
    }
    
    .sidebar-link svg {
        position: static;
        z-index: auto;
    }
    .sidebar-link span { /* Show labels */
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        background: none;
        color: inherit;
        padding: 0;
        font-size: 0.9rem;
        box-shadow: none;
    }
    
    /* General mobile adjustments */
    .header .user-name,
    .header .user-menu-chevron {
        display: none;
    }
    .header .user-menu-button {
        padding: 0.2rem;
        gap: 0;
    }

    .stat-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-layout, .profile-grid, .bulk-sender-grid, .modal-lead-grid, .invoice-view-grid, .gmb-hub-layout {
        grid-template-columns: 1fr;
    }
    .page-header {
        flex-direction: row;
        align-items: center;
        gap: 0.8rem;
    }
    .form-grid-2col, .form-grid-3col, .form-grid-4col {
        grid-template-columns: 1fr;
    }
    .filter-bar, .filter-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .rto-progress-stepper {
        flex-direction: column;
        align-items: flex-start;
    }
     .rto-progress-stepper::before {
        left: 1rem;
        top: 0;
        bottom: 0;
        width: 2px;
        height: 100%;
    }
    .step {
        width: 100%;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.4rem 0;
    }
    .header-clock {
        display: none;
    }
    .reminder-card {
        flex-direction: column;
        align-items: stretch;
    }
    .reminder-card-actions {
        flex-direction: row;
        margin-top: 0.6rem;
    }

    /* === RESPONSIVE LIVE INBOX === */
    .inbox-layout {
        flex-direction: column;
        height: auto;
        min-height: 80vh; /* Give it a decent height on mobile */
    }
    .inbox-sidebar {
        width: 100%;
        max-height: 40vh; /* Allow it to take up to 40% of the screen height */
        border-right: none;
        border-bottom: 1px solid var(--c-border);
    }

    /* === RESPONSIVE TABLES === */
    .responsive-table thead {
        display: none;
    }
    .responsive-table tr {
        display: block;
        border: 1px solid var(--c-border);
        border-radius: 0.4rem;
        padding: 0.8rem;
        margin-bottom: 1rem;
        box-shadow: 0 1px 2px var(--shadow-color);
    }
    .responsive-table td {
        display: block;
        padding: 0.5rem 0.2rem;
        text-align: right;
        white-space: normal;
    }
    .responsive-table td:not(:last-child) {
        border-bottom: 1px dashed var(--c-border);
    }
    .responsive-table td::before {
        content: attr(data-label);
        float: left;
        font-weight: 600;
        color: var(--c-text-1);
    }
    .responsive-table .table-actions {
        text-align: left;
        padding-top: 0.8rem;
        border-bottom: none;
    }
    .responsive-table .table-actions::before {
        display: none;
    }
    .table-action-btn {
        padding: 0.5rem; /* Better touch targets */
    }
}

/* 11. NEW: Interactive Dashboard Workflow Styles
----------------------------------------------------------------*/
.interactive-workflow-item {
    padding: 0.8rem;
    border: 1px solid var(--c-border);
    border-radius: 0.4rem;
    transition: background-color 0.2s;
}
.interactive-workflow-item:hover {
    background-color: var(--c-bg-3);
}

.interactive-workflow-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.interactive-workflow-header .chevron-icon {
    transition: transform 0.3s ease-in-out;
    color: var(--c-text-3);
}
.interactive-workflow-header.expanded .chevron-icon {
    transform: rotate(180deg);
}

.workflow-tasks-list {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-in-out;
    padding-top: 0;
    margin-top: 0;
}
.workflow-tasks-list > div {
    overflow: hidden;
}
.workflow-tasks-list.expanded {
    grid-template-rows: 1fr;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px dashed var(--c-border-2);
}

.workflow-task-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    padding: 0.4rem;
    border-radius: 0.3rem;
    transition: background-color 0.2s;
    cursor: pointer;
}
.workflow-task-item label:hover {
    background-color: var(--c-bg);
}
.workflow-task-item input[type="checkbox"]:checked + span {
    text-decoration: line-through;
    color: var(--c-text-3);
}
.workflow-task-item input[type="checkbox"]:disabled {
    cursor: wait;
}
/* 12. NEW: Dashboard Activity Timeline
----------------------------------------------------------------*/
.activity-timeline-container {
    max-height: 350px; /* Controls the height of the card */
    overflow-y: auto;
    padding-right: 0.5rem;
}
.activity-timeline {
    list-style: none;
    padding: 0 0 0 1.5rem;
    margin: 0;
    position: relative;
}
.activity-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.75rem;
    width: 2px;
    height: 100%;
    background-color: var(--c-border);
    transform: translateX(-50%);
}
.timeline-item {
    position: relative;
    padding-bottom: 1rem;
}
.timeline-item:last-child {
    padding-bottom: 0;
}
.timeline-icon {
    position: absolute;
    left: -1.5rem;
    top: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background-color: var(--c-bg-2);
    border: 2px solid var(--c-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.timeline-icon svg {
    width: 0.8rem;
    height: 0.8rem;
}
.timeline-content {
    background-color: var(--c-bg);
    padding: 0.6rem 0.8rem;
    border-radius: 0.4rem;
    border: 1px solid var(--c-border);
}
.timeline-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--c-text-1);
}
.timeline-text a {
    text-decoration: none;
    color: inherit;
}
.timeline-text a:hover {
    text-decoration: underline;
}
.timeline-time {
    font-size: 0.7rem;
    color: var(--c-text-3);
    margin-top: 0.25rem;
}

/* Timeline Icon Colors */
.timeline-icon-blue { border-color: #93c5fd; background-color: #dbeafe; color: #3b82f6; }
html.dark .timeline-icon-blue { background-color: #1e3a8a; border-color: #3b82f6; color: #93c5fd; }

.timeline-icon-green { border-color: #86efac; background-color: #dcfce7; color: #16a34a; }
html.dark .timeline-icon-green { background-color: #166534; border-color: #22c55e; color: #86efac; }

.timeline-icon-violet { border-color: #c4b5fd; background-color: #ede9fe; color: #7c3aed; }
html.dark .timeline-icon-violet { background-color: #5b21b6; border-color: #8b5cf6; color: #c4b5fd; }