@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

:root
{
    --theme_bg: #edf1f4;
    --theme_surface: #ffffff;
    --theme_surface_alt: #f5f8fb;
    --theme_surface_deep: #eef3f7;
    --theme_border: #d3dde6;
    --theme_border_soft: #e0e9f0;
    --theme_text: #1c2d3d;
    --theme_muted: #627383;
    --theme_primary: #255b7d;
    --theme_primary_hover: #1d4864;
    --theme_primary_soft: #d7e3ec;
    --theme_primary_soft_text: #335b75;
    --theme_danger: #a85b55;
    --theme_danger_hover: #8f4b46;
    --theme_success_soft: #dfece4;
    --theme_success_text: #2f5f49;
    --theme_warning_soft: #efe7d8;
    --theme_warning_text: #7a6535;
    --theme_shadow: 0 22px 48px rgba(15, 23, 42, 0.11);
    --btn_primary_bg: #0f6ea6;
    --btn_primary_hover: #0c5b89;
    --btn_neutral_bg: #2d5068;
    --btn_neutral_hover: #244357;
    --btn_success_bg: #1f7f67;
    --btn_success_hover: #196853;
    --btn_tools_bg: #5a4ea3;
    --btn_tools_hover: #4a4187;
    --btn_warning_bg: #4f5f7d;
    --btn_warning_hover: #404d66;
    --btn_danger_bg: #b94a4a;
    --btn_danger_hover: #9b3d3d;
}

body
{
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: radial-gradient(circle at 18% 12%, #f5f9fc 0%, var(--theme_bg) 42%, #e7edf3 100%);
    color: var(--theme_text);
    letter-spacing: .01em;
}

code,
pre,
.font-mono,
.map_metric_value_coord,
[data-field="latitude"],
[data-field="longitude"]
{
    font-family: 'JetBrains Mono', monospace !important;
}

.dashboard-shell,
.container
{
    max-width: 1760px;
}

.from-blue-50
{
    --tw-gradient-from: #f3f8fc var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(243, 248, 252, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-slate-50
{
    --tw-gradient-stops: var(--tw-gradient-from), #edf3f8 var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.to-blue-100
{
    --tw-gradient-to: #e4ebf2 var(--tw-gradient-to-position) !important;
}

.from-blue-700
{
    --tw-gradient-from: #294f68 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(41, 79, 104, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-blue-500
{
    --tw-gradient-to: #3b647f var(--tw-gradient-to-position) !important;
}

.from-blue-600
{
    --tw-gradient-from: #2a5068 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(42, 80, 104, 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-blue-400
{
    --tw-gradient-to: #4a6f88 var(--tw-gradient-to-position) !important;
}

.bg-white
{
    background-color: var(--theme_surface) !important;
}

.bg-gray-100,
.bg-slate-50
{
    background-color: var(--theme_surface_alt) !important;
}

.bg-gray-50
{
    background-color: #f4f7fa !important;
}

.bg-blue-50
{
    background-color: var(--theme_primary_soft) !important;
}

.bg-blue-100
{
    background-color: #d4e3ee !important;
}

.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-blue-800
{
    background-color: var(--theme_primary) !important;
}

.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover
{
    background-color: var(--theme_primary_hover) !important;
}

.bg-red-500,
.bg-red-600
{
    background-color: var(--theme_danger) !important;
}

.hover\:bg-red-600:hover,
.hover\:bg-red-700:hover
{
    background-color: var(--theme_danger_hover) !important;
}

.bg-emerald-500,
.bg-emerald-600
{
    background-color: #3e6f62 !important;
}

.hover\:bg-emerald-600:hover,
.hover\:bg-emerald-700:hover
{
    background-color: #335b50 !important;
}

.bg-yellow-50
{
    background-color: var(--theme_warning_soft) !important;
}

.bg-red-50
{
    background-color: #f2e9e8 !important;
}

.text-yellow-600,
.text-yellow-700,
.text-yellow-900
{
    color: var(--theme_warning_text) !important;
}

.text-red-600,
.text-red-700
{
    color: #91524d !important;
}

.bg-green-50,
.bg-green-100
{
    background-color: var(--theme_success_soft) !important;
}

.text-green-600,
.text-green-700,
.text-green-800
{
    color: var(--theme_success_text) !important;
}

.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900
{
    color: var(--theme_primary_soft_text) !important;
}

.bg-yellow-400
{
    background-color: #dbc988 !important;
}

.bg-slate-700,
.bg-slate-800
{
    background-color: #3c4f65 !important;
}

.hover\:bg-slate-800:hover
{
    background-color: #334457 !important;
}

.text-gray-800,
.text-slate-800
{
    color: var(--theme_text) !important;
}

.text-gray-700,
.text-slate-700
{
    color: #3d4f60 !important;
}

.text-gray-600,
.text-slate-600
{
    color: var(--theme_muted) !important;
}

.text-gray-500,
.text-slate-500
{
    color: #718194 !important;
}

.border,
.border-gray-200,
.border-slate-200,
.border-blue-100,
.border-blue-200,
.border-blue-600
{
    border-color: var(--theme_border) !important;
}

.divide-y> :not([hidden])~ :not([hidden])
{
    border-color: var(--theme_border) !important;
}

.focus\:ring-blue-500:focus
{
    --tw-ring-color: rgba(34, 72, 98, 0.28) !important;
}

.focus\:border-transparent:focus
{
    border-color: transparent !important;
}

input,
select,
textarea
{
    background-color: #fbfdff;
    border-color: var(--theme_border) !important;
    color: var(--theme_text);
    border-width: 1.2px !important;
    min-height: 42px;
    border-radius: 12px !important;
}

input::placeholder,
textarea::placeholder
{
    color: #8a98a7;
}

button,
a
{
    transition: all .2s ease;
}

nav
{
    box-shadow: 0 16px 36px rgba(12, 20, 28, 0.22) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

nav .bg-white
{
    background: rgba(255, 255, 255, 0.96) !important;
}

nav .bg-white\/20
{
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .2);
}

nav .bg-white\/20:hover,
nav .hover\:bg-white\/30:hover
{
    background: rgba(255, 255, 255, .22) !important;
}

.shadow-lg,
.shadow-xl,
.shadow-2xl,
.shadow-md
{
    box-shadow: var(--theme_shadow) !important;
}

.rounded-\[28px\],
.rounded-2xl,
.rounded-xl
{
    border-radius: 18px !important;
}

.rounded-lg
{
    border-radius: 12px !important;
}

.area_action_button,
.device_action_button,
.map_toolbar_button
{
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    font-weight: 700;
    border-radius: 12px !important;
}

.theme_dashboard_page button[title="Notification Settings"]
{
    background: var(--btn_neutral_bg) !important;
}

.theme_dashboard_page button[title="Notification Settings"]:hover
{
    background: var(--btn_neutral_hover) !important;
}

.theme_dashboard_page .area_action_button.bg-emerald-500
{
    background: var(--btn_success_bg) !important;
}

.theme_dashboard_page .area_action_button.bg-emerald-500:hover
{
    background: var(--btn_success_hover) !important;
}

.theme_dashboard_page .area_action_button.bg-red-500
{
    background: var(--btn_danger_bg) !important;
}

.theme_dashboard_page .area_action_button.bg-red-500:hover
{
    background: var(--btn_danger_hover) !important;
}

.theme_dashboard_page .device_action_button.bg-blue-500
{
    background: var(--btn_primary_bg) !important;
}

.theme_dashboard_page .device_action_button.bg-blue-500:hover
{
    background: var(--btn_primary_hover) !important;
}

.theme_dashboard_page .device_action_button.bg-slate-700
{
    background: var(--btn_warning_bg) !important;
}

.theme_dashboard_page .device_action_button.bg-slate-700:hover
{
    background: var(--btn_warning_hover) !important;
}

.theme_dashboard_page .device_action_button.bg-red-500
{
    background: var(--btn_danger_bg) !important;
}

.theme_dashboard_page .device_action_button.bg-red-500:hover
{
    background: var(--btn_danger_hover) !important;
}

.theme_dashboard_page .map_toolbar_button.bg-slate-700
{
    background: var(--btn_neutral_bg) !important;
}

.theme_dashboard_page .map_toolbar_button.bg-slate-700:hover
{
    background: var(--btn_neutral_hover) !important;
}

.theme_dashboard_page #btnDraw.map_toolbar_button
{
    background: linear-gradient(135deg, #0f6ea6 0%, #2a82b7 100%) !important;
}

.theme_dashboard_page #btnDraw.map_toolbar_button:hover
{
    background: linear-gradient(135deg, #0c5b89 0%, #1f709f 100%) !important;
}

.map_toolbar_button.bg-blue-700
{
    background: linear-gradient(135deg, var(--btn_tools_bg) 0%, #6b5eb6 100%) !important;
}

.theme_dashboard_page .map_toolbar_button.bg-blue-700:hover
{
    background: linear-gradient(135deg, var(--btn_tools_hover) 0%, #594d9b 100%) !important;
}

.theme_dashboard_page nav a.bg-red-500,
.theme_history_page nav a.bg-red-500
{
    background: var(--btn_danger_bg) !important;
}

.theme_dashboard_page nav a.bg-red-500:hover,
.theme_history_page nav a.bg-red-500:hover
{
    background: var(--btn_danger_hover) !important;
}

.map_metric_card,
.map_metrics_grid>div,
#bulkActions
{
    background: #f7fafd !important;
    border: 1px solid var(--theme_border) !important;
    border-radius: 14px !important;
}

[data-device-id]
{
    border: 1px solid var(--theme_border);
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}

[data-device-id]>div:first-child
{
    background: linear-gradient(135deg, #33556d 0%, #3f677e 100%) !important;
}

[data-device-id] [data-field="timestamp"]
{
    color: #617286 !important;
}

.modal-overlay,
.modal
{
    backdrop-filter: blur(2px);
    background: rgba(14, 21, 28, .72) !important;
}

.modal-content,
.modal-card
{
    border: 1px solid rgba(213, 222, 230, 0.9);
    box-shadow: 0 30px 50px rgba(10, 18, 24, 0.28);
    border-radius: 20px !important;
}

table thead th
{
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #4b5c6d;
    font-weight: 700;
}

table tbody td
{
    border-color: var(--theme_border);
}

table tbody tr:hover
{
    background: #f2f7fb !important;
}

.theme_dashboard_page .desktop-main-content
{
    padding-top: 1.2rem !important;
}

.theme_dashboard_page nav .dashboard-shell,
.theme_history_page nav .container
{
    padding-top: .95rem !important;
    padding-bottom: .95rem !important;
}

.theme_dashboard_page nav .bg-white,
.theme_history_page nav .bg-white
{
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
}

.theme_dashboard_page .card-fixed-height,
.theme_history_page .container>.bg-white
{
    background: linear-gradient(180deg, #ffffff 0%, #fdfefe 100%) !important;
    border: 1px solid var(--theme_border_soft) !important;
    box-shadow: 0 20px 40px rgba(12, 20, 28, 0.1) !important;
}

.theme_dashboard_page .card-fixed-height>.flex.items-center.justify-between.mb-4,
.theme_dashboard_page .card-fixed-height>.flex.items-center.justify-between.mb-5,
.theme_history_page .bg-white.rounded-xl.shadow-xl.p-6>.flex.flex-wrap.items-center.justify-between.mb-6
{
    border-bottom: 1px solid var(--theme_border_soft);
    padding-bottom: .95rem;
    margin-bottom: 1.1rem !important;
}

.theme_dashboard_page .area_action_group .area_action_button,
.theme_dashboard_page .device_action_grid .device_action_button,
.theme_history_page button,
.theme_history_page a
{
    font-size: .78rem;
}

.theme_dashboard_page .device_action_grid
{
    background: var(--theme_surface_deep) !important;
}

.theme_dashboard_page .map_metrics_grid>div
{
    background: linear-gradient(180deg, #f9fcff 0%, #f3f8fc 100%) !important;
}

.theme_dashboard_page #map
{
    border-radius: 16px !important;
    border: 1px solid var(--theme_border_soft) !important;
}

.theme_dashboard_page .leaflet-control-zoom a
{
    background: #f8fbfe !important;
    color: #35516b !important;
    border-color: var(--theme_border) !important;
}

.theme_dashboard_page .leaflet-control-zoom a:hover
{
    background: #ebf2f8 !important;
}

.theme_history_page form select,
.theme_history_page form input
{
    background: #fcfdff !important;
}

.theme_history_page .bg-white.rounded-xl.shadow-xl.p-6
{
    padding: 1.75rem !important;
}

.theme_history_page table
{
    border-collapse: separate;
    border-spacing: 0;
}

.theme_history_page table tbody tr:nth-child(2n)
{
    background: #fbfdff;
}

.theme_history_page table thead th:first-child
{
    border-top-left-radius: 12px;
}

.theme_history_page table thead th:last-child
{
    border-top-right-radius: 12px;
}

.mobile-bottom-bar
{
    border-top: 0;
    background: transparent;
    backdrop-filter: none;
    padding: 0 .6rem calc(env(safe-area-inset-bottom, 0px) + .7rem);
}

.bottom_bar_shell
{
    margin: 0 auto;
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--theme_border);
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(12, 20, 28, 0.2);
    padding: .42rem .4rem;
}

.mobile-nav-button
{
    color: #5c6d7f !important;
    border-radius: 12px;
    min-height: 56px;
    padding: .3rem .2rem;
}

.mobile-nav-button.active
{
    color: var(--theme_primary) !important;
    background: #edf3f8;
}

.theme_login_page
{
    background: linear-gradient(145deg, #274b63 0%, #356079 48%, #587a94 100%) !important;
}

.theme_login_page::before
{
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 82% 82%, rgba(255, 255, 255, 0.14) 0, rgba(255, 255, 255, 0) 32%);
    pointer-events: none;
}

.theme_login_card
{
    position: relative;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(229, 236, 244, 0.95);
    box-shadow: 0 34px 58px rgba(8, 16, 24, 0.28) !important;
    padding: 2.1rem !important;
}

.theme_login_card .bg-blue-600.w-20.h-20
{
    width: 4.6rem !important;
    height: 4.6rem !important;
    background: linear-gradient(145deg, #2e526b 0%, #47708a 100%) !important;
    border-radius: 16px !important;
}

.theme_login_card h1
{
    font-size: 2rem !important;
    letter-spacing: .01em;
}

.theme_login_card p
{
    color: #6a7b8d !important;
}

.theme_login_card form button[type="submit"]
{
    min-height: 46px;
    border-radius: 12px !important;
    letter-spacing: .01em;
}

.theme_login_card .border-l-4
{
    border-left-width: 3px !important;
}

@media (max-width: 640px)
{
    .theme_dashboard_page .desktop-main-content
    {
        padding-top: .75rem !important;
    }

    .theme_history_page .bg-white.rounded-xl.shadow-xl.p-6
    {
        padding: 1rem !important;
    }

    .theme_login_card
    {
        border-radius: 16px !important;
        padding: 1.35rem !important;
    }

    .theme_login_card h1
    {
        font-size: 1.75rem !important;
    }
}