/* Modern Medical Dashboard Theme (Dark/Light Neutral) */
:root {
    /* Brand Colors - Deep Teal & Slate */
    --primary: #0f766e;
    /* Teal 700 */
    --primary-hover: #115e59;
    /* Teal 800 */
    --secondary: #3b82f6;
    /* Blue 500 */

    /* Backgrounds */
    --bg-body: #f1f5f9;
    /* Slate 100 */
    --bg-white: #ffffff;
    --sidebar-bg: #1e293b;
    /* Slate 800 */

    /* Text */
    --text-primary: #1e293b;
    /* Slate 800 */
    --text-secondary: #64748b;
    /* Slate 500 */
    --text-on-dark: #f8fafc;

    /* Borders */
    --border: #e2e8f0;

    /* Functional */
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #0ea5e9;

    /* Spacing */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 0px;
    --header-height: 64px;
}

body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/* Sidebar Styling */
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--sidebar-bg);
    color: var(--text-on-dark);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50;
    transition: transform 0.3s ease;
}

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

body.sidebar-hidden .main-content {
    margin-left: 0;
}

.sidebar-toggle {
    position: fixed;
    top: 15px;
    left: 220px;
    z-index: 999;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: left 0.3s ease;
}

body.sidebar-hidden .sidebar-toggle {
    left: 10px;
}




/* Sidebar Brand/Logo Container */
.sidebar-brand-link {
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.sidebar-brand-link:hover {
    opacity: 0.95;
}

.sidebar-brand {
    height: auto;
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Logo Container - Transparent, No Background */
.logo-container {
    padding: 0.5rem;
    transition: all 0.3s ease;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-brand-link:hover .logo-container {
    transform: translateY(-2px);
}

/* Hospital Logo Image - Clean and Transparent */
.hospital-logo {
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    display: block;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.sidebar-brand-link:hover .hospital-logo {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.sidebar-brand svg {
    margin-right: 0.75rem;
}


.sidebar-nav {
    flex: 1;
    padding: 1.5rem 1rem;
    overflow-y: auto;
}

.nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    color: #cbd5e1;
    /* Slate 300 */
    text-decoration: none;
    border-radius: 0.375rem;
    transition: all 0.2s;
    font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.nav-link svg {
    margin-right: 0.75rem;
    width: 20px;
    height: 20px;
}

.nav-category {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #64748b;
    margin: 1.5rem 0 0.5rem 1rem;
    letter-spacing: 0.05em;
    font-weight: 700;
}

/* Main Content Area */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Top Header */
.top-header {
    height: var(--header-height);
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 40;
}

.content-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
}

/* Card Styling Update */
.card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
    margin-bottom: 1.5rem;
}

.card h3 {
    margin-top: 0;
    font-size: 1.125rem;
    color: var(--text-primary);
    font-weight: 600;
}

/* Table Design */
table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    background-color: #f8fafc;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-primary);
    vertical-align: middle;
}

/* Utility Classes */
.row {
    margin-bottom: 1.5rem;
}

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

/* Buttons */
.btn {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    font-size: 0.875rem;
    border: none;
    transition: background 0.2s;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: #f1f5f9;
}

/* Form Controls */
.form-control {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    width: 100%;
    margin-bottom: 0.5rem;
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.1);
}

.form-label {
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    display: block;
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar {
        width: 70px;
    }

    .sidebar-brand span,
    .nav-link span,
    .nav-category {
        display: none;
    }

    .main-content {
        margin-left: 70px;
    }
}

/* Badge Styling */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    color: #fff; /* Default white text */
}

/* Ensure visibility for specific badges if they use light backgrounds */
.badge-secondary {
    color: #fff;
    background-color: #6c757d;
}

.badge-primary {
    color: #fff;
    background-color: var(--primary);
}

.badge-success {
    color: #fff;
    background-color: var(--success);
}

.badge-info {
    color: #fff;
    background-color: var(--info);
}

.badge-warning {
    color: #1e293b; /* Dark text for warning/yellow */
    background-color: var(--warning);
}

.badge-danger {
    color: #fff;
    background-color: var(--danger);
}

/* User Request - if white font is invisible, maybe backgrounds are missing or too light?
   Force darker text if needed or ensure background is set. 
   If user specifically asked for "change it to darker one", maybe they mean the text.
   Let's create a specific override for table badges to be safe or use a darker background.
*/


/* Hide TinyMCE upgrade button and branding */
.tox-statusbar__right-container,
.tox-promotion,
.tox-promotion-link,
.tox-statusbar__branding,
.tox .tox-statusbar__right-container,
.tox .tox-promotion,
.tox .tox-statusbar a {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}