/* ==========================================================================
   Scale Craft India - Modern Theme overrides for Bahmni EMR
   ========================================================================== */

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

/* Apply font globally */
body, input, button, select, textarea, .form, .btn, td, th, h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* 1. Global Page Backgrounds and Theme Colors */
:root {
    --sc-primary: #0A84FF;
    --sc-primary-dark: #0060cc;
    --sc-secondary: #00D4FF;
    --sc-accent: #22C55E;
    --sc-bg: #060E1E;
    --sc-bg2: #081C3A;
    --sc-bg3: #0D2347;
    --sc-text: #FFFFFF;
    --sc-text-muted: #8BA4C0;
    --sc-text-light: #B8D0E8;
    --sc-glass: rgba(8, 28, 58, 0.7);
    --sc-glass-border: rgba(255, 255, 255, 0.08);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--sc-bg) !important;
}
::-webkit-scrollbar-thumb {
    background: var(--sc-primary) !important;
    border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--sc-secondary) !important;
}

/* 2. Login Page Styling */
body.login-page, .login-body, div[ng-controller="LoginController"] {
    background: radial-gradient(circle at top right, var(--sc-bg3) 0%, var(--sc-bg) 100%) !important;
    color: var(--sc-text) !important;
}

.login-wrapper {
    background: var(--sc-glass) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--sc-glass-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
    padding: 40px !important;
    max-width: 450px !important;
}

.login-wrapper h2, .login-wrapper label, .login-wrapper span {
    color: var(--sc-text-light) !important;
}

/* Inputs and Forms */
input[type="text"], input[type="password"], select, textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    transition: all 0.3s ease;
}

input[type="text"]:focus, input[type="password"]:focus, select:focus, textarea:focus {
    border-color: var(--sc-secondary) !important;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.3) !important;
    outline: none !important;
}

/* Buttons */
.btn-primary, button[type="submit"], .confirm, .button, .login-btn, input[type="submit"] {
    background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary)) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 15px rgba(10, 132, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover, button[type="submit"]:hover, .confirm:hover, .button:hover, .login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4) !important;
}

/* 3. Main Dashboard & Header Bar */
header, .header, .opd-header, .navbar, .top-bar, .bahmni-header {
    background: var(--sc-bg2) !important;
    border-bottom: 2px solid var(--sc-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.header-logo, .logo-container img, .logo img {
    max-height: 45px !important;
    width: auto !important;
}

/* User & Location info badge in header */
.header-info, .user-info, .location-info {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--sc-text-light) !important;
    border-radius: 4px !important;
}

/* Back button in EMR header */
.back-btn, .btn-back {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--sc-text) !important;
}
.back-btn:hover, .btn-back:hover {
    background: var(--sc-primary) !important;
    color: white !important;
}

/* 4. Bahmni Dashboard / App Landing Icons */
.dashboard-tile, .app-big-btn, .button-grid a, .app-link {
    background: var(--sc-bg2) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: var(--sc-text-light) !important;
}

.dashboard-tile:hover, .app-big-btn:hover, .button-grid a:hover, .app-link:hover {
    transform: translateY(-4px);
    border-color: var(--sc-secondary) !important;
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.15) !important;
    color: var(--sc-text) !important;
}

.dashboard-tile i, .app-big-btn i, .button-grid a i {
    color: var(--sc-secondary) !important;
}

/* App Header/Landing welcome title design */
.welcome-msg h1, .welcome-msg b {
    font-weight: 700 !important;
}

/* Active Tabs and Navigation items */
.tabs .active, .tab-item.active, .nav-tabs > li.active > a {
    border-bottom: 3px solid var(--sc-secondary) !important;
    color: var(--sc-secondary) !important;
    font-weight: 600 !important;
}

/* Footer styling */
footer, .footer {
    background: var(--sc-bg) !important;
    color: var(--sc-text-muted) !important;
    border-top: 1px solid var(--sc-bg2) !important;
}