/* Maritime Port Agency Login Theme - Matching fmh_customizations.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Login Page Body Styling */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #1e293b;
    /* --text-color from maritime theme */
    background-color: #f8fafc;
    /* --bg-color from maritime theme */
}

/* Navigation Bar - Maritime Theme */
.navbar {
    height: 48px;
    background-color: #0f172a !important;
    /* --navbar-bg from maritime theme */
    border-bottom: 1px solid rgba(14, 165, 233, 0.2) !important;
    /* Ocean blue accent */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
    padding: 0;
}

/* Fix navbar text visibility - white text on dark background */
.navbar .navbar-brand,
.navbar .navbar-brand span,
.navbar .navbar-nav>li>a,
.navbar .navbar-nav .dropdown-toggle {
    color: #ffffff !important;
}

.navbar .navbar-brand:hover,
.navbar .navbar-nav>li>a:hover,
.navbar .navbar-nav .dropdown-toggle:hover {
    color: #38bdf8 !important;
    /* --blue-400 from maritime theme */
}

.navbar-brand img {
    display: inline-block;
    max-width: 140px !important;
    /* Consistent with maritime theme */
    max-height: 32px !important;
}

.app-logo {
    width: 32px !important;
    /* Consistent with maritime theme */
    height: 32px !important;
}

.navbar-home img {
    max-height: 80px !important;
}

.page-card-head img {
    max-height: 42px !important;
    /* Consistent with maritime theme */
}

/* Login Card Styling */
.page-card {
    background-color: #ffffff !important;
    /* --fg-color from maritime theme */
    border: 1px solid #e2e8f0 !important;
    /* --border-color from maritime theme */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Primary Buttons - Maritime Ocean Blue */
.btn.btn-primary,
div#driver-popover-item .driver-popover-footer button.btn-primary,
div#driver-popover-item .driver-popover-footer button.driver-next-btn {
    background-color: #0ea5e9 !important;
    /* --primary from maritime theme */
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap;
    --icon-stroke: currentColor;
}

.btn.btn-primary:hover {
    background-color: #0284c7 !important;
    /* --blue-600 from maritime theme */
    color: #ffffff !important;
}

/* Secondary Buttons */
.btn.btn-secondary,
.btn.btn-default {
    background-color: #f1f5f9 !important;
    /* --btn-default-bg from maritime theme */
    color: #1e293b !important;
    /* --text-color from maritime theme */
    border: none !important;
    box-shadow: none !important;
}

.btn.btn-secondary:hover,
.btn.btn-default:hover {
    background-color: #e2e8f0 !important;
    /* --btn-default-hover-bg from maritime theme */
    color: #1e293b !important;
}

/* Form Controls */
.form-control {
    border: none !important;
    color: #1e293b !important;
    /* --text-color from maritime theme */
    background-color: #f1f5f9 !important;
    /* --control-bg from maritime theme */
    box-shadow: none !important;
}

.form-control:focus {
    background-color: #ffffff !important;
    /* --fg-color from maritime theme */
    box-shadow: 0 0 0 2px #bae6fd !important;
    /* --blue-200 from maritime theme */
    outline: none !important;
}

/* Control Labels */
.control-label,
.grid-heading-row {
    color: #475569 !important;
    /* --text-muted from maritime theme */
    font-weight: 500 !important;
}

/* Links */
a {
    color: #1e293b !important;
    /* --text-color from maritime theme */
    font-weight: 500 !important;
    cursor: pointer;
}

a:hover {
    color: #0ea5e9 !important;
    /* --primary from maritime theme */
}

/* Widget Styling */
.widget.links-widget-box .link-item {
    display: flex;
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: 500 !important;
    color: #1e293b !important;
    /* --text-color from maritime theme */
    padding: 4px;
    margin-left: -4px;
    margin-bottom: 0px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
}

.widget.links-widget-box .link-item:hover {
    background-color: #f0f9ff !important;
    /* --blue-50 from maritime theme */
    color: #0ea5e9 !important;
    /* --primary from maritime theme */
}

.widget.links-widget-box .link-item .disabled-link {
    color: #64748b !important;
    /* --gray-500 from maritime theme */
}

.widget .widget-head .widget-label .widget-title {
    display: flex;
    color: #0f172a !important;
    /* --heading-color from maritime theme */
    font-weight: 600 !important;
}

/* Scrollbar Styling */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: #f1f5f9;
    /* --gray-100 from maritime theme */
}

*::-webkit-scrollbar-thumb {
    background: #7dd3fc;
    /* --blue-300 from maritime theme */
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
    /* --blue-400 from maritime theme */
}

align-items: center;
font-size: var(--text-base);
font-weight: bold;
letter-spacing: 0.015em;
font-family: inherit;
line-height: 1.3em;
color: #243e78;
cursor: default;
}

/* Custom scrollbar styling */
*::-webkit-scrollbar-thumb {
    background: #243e78;
    background: linear-gradient(135deg, #243e78 0%, #1a2e5a 100%);
    border-radius: 6px;
}