* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
font-family:
Arial,
Helvetica,
sans-serif;
}
button,
input {
font: inherit;
}
/* =========================================
LOGIN PAGE
========================================= */
.login-body {
min-height: 100vh;
overflow: hidden;
}
.login-page {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
background:
linear-gradient(
rgba(4, 15, 28, 0.70),
rgba(4, 15, 28, 0.80)
),
url("../images/login-bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.login-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 30% 40%,
rgba(0, 174, 239, 0.10),
transparent 40%
);
pointer-events: none;
}
.login-card {
position: relative;
z-index: 2;
width: 100%;
max-width: 1050px;
min-height: 560px;
display: grid;
grid-template-columns:
1.1fr
0.9fr;
border:
1px solid
rgba(255, 255, 255, 0.12);
border-radius: 22px;
overflow: hidden;
background:
rgba(6, 19, 35, 0.88);
backdrop-filter:
blur(14px);
box-shadow:
0 30px 80px
rgba(0, 0, 0, 0.45);
}
/* =========================================
SYSTEM STATUS
========================================= */
.system-status {
position: absolute;
top: 24px;
right: 28px;
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.3px;
color: #6ee7b7;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #22c55e;
box-shadow:
0 0 10px
rgba(34, 197, 94, 0.9);
}
/* =========================================
LEFT SIDE
========================================= */
.login-brand-section {
padding:
85px
65px
60px;
display: flex;
flex-direction: column;
justify-content: center;
color: #ffffff;
border-right:
1px solid
rgba(255, 255, 255, 0.08);
}
.system-logo {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
margin-bottom: 30px;
background:
linear-gradient(
135deg,
#00a8e8,
#2563eb
);
font-size: 24px;
box-shadow:
0 10px 25px
rgba(0, 168, 232, 0.25);
}
.brand-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: #56c7f3;
margin-bottom: 10px;
}
.login-brand-section h1 {
margin:
0
0
18px;
font-size: 44px;
letter-spacing: -1.5px;
line-height: 1;
}
.login-brand-section h1 span {
color: #39bdf4;
}
.system-description {
max-width: 430px;
margin:
0
0
35px;
font-size: 14px;
line-height: 1.8;
color:
rgba(
255,
255,
255,
0.65
);
}
.location-box {
display: flex;
align-items: center;
gap: 13px;
max-width: 330px;
padding: 15px 17px;
border-radius: 12px;
border:
1px solid
rgba(255, 255, 255, 0.08);
background:
rgba(255, 255, 255, 0.04);
}
.location-box > i {
color: #39bdf4;
font-size: 18px;
}
.location-box strong,
.location-box span {
display: block;
}
.location-box strong {
font-size: 13px;
}
.location-box span {
margin-top: 3px;
font-size: 11px;
color:
rgba(
255,
255,
255,
0.50
);
}
/* =========================================
RIGHT SIDE
========================================= */
.login-form-section {
padding:
90px
55px
55px;
display: flex;
flex-direction: column;
justify-content: center;
background:
rgba(
10,
26,
45,
0.65
);
color: #ffffff;
}
.login-small-title {
display: block;
margin-bottom: 9px;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: #38bdf8;
}
.login-form-header h2 {
margin:
0
0
9px;
font-size: 27px;
}
.login-form-header p {
margin:
0
0
28px;
font-size: 12px;
line-height: 1.6;
color:
rgba(
255,
255,
255,
0.48
);
}
/* =========================================
ERROR MESSAGE
========================================= */
.login-error {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
padding: 12px 14px;
border-radius: 9px;
border:
1px solid
rgba(248, 113, 113, 0.20);
background:
rgba(127, 29, 29, 0.20);
color: #fca5a5;
font-size: 12px;
}
/* =========================================
FIELDS
========================================= */
.login-field {
margin-bottom: 18px;
}
.login-field label {
display: block;
margin-bottom: 8px;
font-size: 11px;
font-weight: 600;
color:
rgba(
255,
255,
255,
0.72
);
}
.input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.input-wrapper > i {
position: absolute;
left: 15px;
color:
rgba(
255,
255,
255,
0.34
);
font-size: 13px;
}
.input-wrapper input {
width: 100%;
height: 48px;
padding:
0
46px;
border-radius: 9px;
border:
1px solid
rgba(255, 255, 255, 0.10);
outline: none;
background:
rgba(
255,
255,
255,
0.045
);
color: #ffffff;
font-size: 13px;
transition:
0.2s ease;
}
.input-wrapper input::placeholder {
color:
rgba(
255,
255,
255,
0.28
);
}
.input-wrapper input:focus {
border-color:
rgba(
56,
189,
248,
0.65
);
background:
rgba(
255,
255,
255,
0.07
);
box-shadow:
0 0 0 3px
rgba(56, 189, 248, 0.08);
}
/* =========================================
PASSWORD BUTTON
========================================= */
.password-toggle {
position: absolute;
right: 12px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color:
rgba(
255,
255,
255,
0.38
);
cursor: pointer;
}
.password-toggle:hover {
color: #ffffff;
}
/* =========================================
LOGIN OPTIONS
========================================= */
.login-options {
display: flex;
align-items: center;
margin:
4px
0
22px;
}
.remember-option {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 11px;
color:
rgba(
255,
255,
255,
0.52
);
}
.remember-option input {
width: 14px;
height: 14px;
accent-color: #0ea5e9;
}
/* =========================================
SIGN IN BUTTON
========================================= */
.sign-in-button {
width: 100%;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
border: 0;
border-radius: 9px;
background:
linear-gradient(
135deg,
#0ea5e9,
#2563eb
);
color: #ffffff;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.sign-in-button:hover {
transform:
translateY(-1px);
box-shadow:
0 10px 25px
rgba(
14,
165,
233,
0.25
);
}
/* =========================================
SECURITY NOTE
========================================= */
.security-note {
display: flex;
align-items: center;
gap: 12px;
margin-top: 30px;
padding-top: 22px;
border-top:
1px solid
rgba(255, 255, 255, 0.07);
}
.security-note > i {
font-size: 17px;
color:
rgba(
255,
255,
255,
0.34
);
}
.security-note strong,
.security-note span {
display: block;
}
.security-note strong {
font-size: 10px;
color:
rgba(
255,
255,
255,
0.66
);
}
.security-note span {
margin-top: 3px;
font-size: 9px;
color:
rgba(
255,
255,
255,
0.32
);
}
/* =========================================
RESPONSIVE
========================================= */
@media (
max-width: 850px
) {
.login-body {
overflow: auto;
}
.login-card {
max-width: 520px;
grid-template-columns:
1fr;
}
.login-brand-section {
padding:
70px
35px
35px;
border-right: 0;
border-bottom:
1px solid
rgba(
255,
255,
255,
0.08
);
}
.login-form-section {
padding:
45px
35px;
}
.system-status {
top: 22px;
right: 22px;
}
}
@media (
max-width: 480px
) {
.login-page {
padding:
15px;
}
.login-brand-section {
padding:
65px
25px
30px;
}
.login-form-section {
padding:
38px
25px;
}
.login-brand-section h1 {
font-size: 34px;
}
}
/* =========================================================
ADMIN LAYOUT
========================================================= */
.app-shell {
min-height: 100vh;
background: #f4f7fb;
color: #1e293b;
}
/* =========================================================
SIDEBAR
========================================================= */
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 255px;
z-index: 1000;
display: flex;
flex-direction: column;
padding: 20px 14px;
background: #081525;
border-right: 1px solid rgba(255, 255, 255, 0.06);
color: #94a3b8;
overflow-y: auto;
overflow-x: hidden;
}
.sidebar-header {
margin-bottom: 18px;
}
.sidebar-brand {
display: flex;
align-items: center;
gap: 11px;
padding: 4px 7px;
color: #ffffff;
text-decoration: none;
}
.sidebar-logo {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 11px;
background: linear-gradient(135deg, #0ea5e9, #2563eb);
color: #ffffff;
font-size: 18px;
box-shadow: 0 7px 20px rgba(14, 165, 233, 0.18);
}
.sidebar-brand-text strong,
.sidebar-brand-text span {
display: block;
}
.sidebar-brand-text strong {
color: #ffffff;
font-size: 14px;
font-weight: 700;
}
.sidebar-brand-text span {
margin-top: 1px;
color: #38bdf8;
font-size: 12px;
font-weight: 600;
}
/* LOCATION */
.sidebar-location {
display: flex;
align-items: center;
gap: 10px;
margin: 0 5px 18px;
padding: 11px 12px;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 9px;
background: rgba(255, 255, 255, 0.035);
}
.sidebar-location > i {
color: #38bdf8;
font-size: 13px;
}
.sidebar-location strong,
.sidebar-location span {
display: block;
}
.sidebar-location strong {
color: #cbd5e1;
font-size: 10px;
font-weight: 600;
}
.sidebar-location span {
margin-top: 2px;
color: #64748b;
font-size: 9px;
}
/* MENU */
.sidebar-section-title {
margin: 10px 11px 7px;
color: #475569;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.3px;
}
.sidebar-menu {
display: flex;
flex-direction: column;
gap: 3px;
margin-bottom: 10px;
}
.sidebar-menu a {
position: relative;
display: flex;
align-items: center;
gap: 11px;
min-height: 40px;
padding: 0 12px;
border-radius: 8px;
color: #8492a6;
font-size: 11px;
font-weight: 600;
text-decoration: none;
transition: 0.2s ease;
}
.sidebar-menu a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.05);
}
.sidebar-menu a.active {
color: #ffffff;
background: rgba(14, 165, 233, 0.12);
}
.sidebar-menu a.active::before {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
left: 0;
width: 3px;
border-radius: 0 4px 4px 0;
background: #38bdf8;
}
.menu-icon {
width: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
font-size: 12px;
}
.sidebar-menu a:hover .menu-icon,
.sidebar-menu a.active .menu-icon {
color: #38bdf8;
}
/* =========================================================
SIDEBAR USER
========================================================= */
.sidebar-footer {
margin-top: auto;
padding: 15px 5px 0;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-user {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
}
.sidebar-avatar {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 50%;
background: #17263a;
color: #38bdf8;
font-size: 12px;
font-weight: 800;
}
.sidebar-user-details {
min-width: 0;
flex: 1;
}
.sidebar-user-details strong,
.sidebar-user-details span {
display: block;
}
.sidebar-user-details strong {
overflow: hidden;
color: #e2e8f0;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
.sidebar-user-details span {
margin-top: 2px;
color: #64748b;
font-size: 9px;
}
.sidebar-logout {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 10px;
border-radius: 7px;
color: #64748b;
font-size: 10px;
font-weight: 600;
text-decoration: none;
transition: 0.2s ease;
}
.sidebar-logout:hover {
color: #f87171;
background: rgba(248, 113, 113, 0.07);
}
/* =========================================================
MAIN CONTENT
========================================================= */
.main-content {
min-height: 100vh;
margin-left: 255px;
padding: 27px 30px 40px;
background: #f4f7fb;
}
/* =========================================================
DASHBOARD HEADER
========================================================= */
.dashboard-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 23px;
}
.page-label,
.panel-label {
display: block;
color: #0284c7;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.4px;
}
.dashboard-header h1 {
margin: 5px 0 4px;
color: #0f172a;
font-size: 27px;
font-weight: 750;
letter-spacing: -0.6px;
}
.dashboard-header p {
margin: 0;
color: #64748b;
font-size: 11px;
}
.dashboard-date {
display: flex;
flex-direction: column;
align-items: flex-end;
padding-top: 4px;
}
.dashboard-date span {
color: #94a3b8;
font-size: 9px;
}
.dashboard-date strong {
margin-top: 3px;
color: #334155;
font-size: 11px;
}
.dashboard-date small {
margin-top: 3px;
color: #94a3b8;
font-size: 9px;
}
/* =========================================================
SUMMARY CARDS
========================================================= */
.summary-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
margin-bottom: 14px;
}
.summary-card {
padding: 17px;
border: 1px solid #e5eaf0;
border-radius: 11px;
background: #ffffff;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.025);
}
.summary-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.summary-card-header > span {
color: #64748b;
font-size: 10px;
font-weight: 600;
}
.summary-icon {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 11px;
}
.summary-icon.blue {
color: #0284c7;
background: #e0f2fe;
}
.summary-icon.orange {
color: #ea580c;
background: #ffedd5;
}
.summary-icon.green {
color: #059669;
background: #d1fae5;
}
.summary-icon.red {
color: #dc2626;
background: #fee2e2;
}
.summary-value {
display: block;
margin: 14px 0 4px;
color: #0f172a;
font-size: 23px;
font-weight: 750;
line-height: 1.1;
}
.recommendation-value {
font-size: 18px;
}
.summary-card small {
color: #94a3b8;
font-size: 9px;
}
/* =========================================================
PANELS
========================================================= */
.dashboard-main-grid {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.65fr);
gap: 14px;
margin-bottom: 14px;
}
.dashboard-lower-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.dashboard-panel {
padding: 19px;
border: 1px solid #e5eaf0;
border-radius: 11px;
background: #ffffff;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.025);
}
.panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
margin-bottom: 17px;
}
.panel-header h2 {
margin: 4px 0;
color: #172033;
font-size: 15px;
font-weight: 700;
}
.panel-header p {
margin: 0;
color: #94a3b8;
font-size: 9px;
line-height: 1.5;
}
.panel-link {
display: flex;
align-items: center;
gap: 6px;
padding-top: 3px;
color: #0284c7;
font-size: 9px;
font-weight: 700;
text-decoration: none;
}
.panel-link:hover {
color: #0369a1;
}
/* =========================================================
DIRECTION CARDS
========================================================= */
.direction-card-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.direction-card {
padding: 13px;
border: 1px solid #edf0f4;
border-radius: 9px;
background: #f8fafc;
}
.direction-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-bottom: 13px;
}
.direction-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: #e0f2fe;
color: #0284c7;
font-size: 10px;
}
.direction-name {
display: block;
margin-bottom: 4px;
color: #64748b;
font-size: 9px;
font-weight: 600;
}
.direction-card > strong {
display: block;
color: #0f172a;
font-size: 22px;
font-weight: 750;
}
.direction-card > small {
color: #94a3b8;
font-size: 8px;
}
/* =========================================================
CONGESTION BADGES
========================================================= */
.congestion-badge {
display: inline-flex;
align-items: center;
padding: 4px 7px;
border-radius: 20px;
font-size: 7px;
font-weight: 800;
white-space: nowrap;
}
.congestion-badge.low {
color: #047857;
background: #d1fae5;
}
.congestion-badge.moderate {
color: #b45309;
background: #fef3c7;
}
.congestion-badge.high {
color: #b91c1c;
background: #fee2e2;
}
.congestion-badge.no-data {
color: #64748b;
background: #e2e8f0;
}
/* =========================================================
AI RECOMMENDATION
========================================================= */
.recommendation-panel {
background: linear-gradient(145deg, #071626, #0d2238);
border-color: #142b42;
color: #ffffff;
}
.recommendation-panel .panel-label {
color: #38bdf8;
}
.recommendation-panel .panel-header h2 {
color: #ffffff;
}
.ai-status {
display: flex;
align-items: center;
gap: 6px;
color: #6ee7b7;
font-size: 7px;
font-weight: 800;
letter-spacing: 0.7px;
}
.ai-status span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}
.recommendation-content {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 5px;
}
.recommendation-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 17px;
border: 1px solid rgba(56, 189, 248, 0.15);
border-radius: 10px;
background: rgba(56, 189, 248, 0.08);
color: #38bdf8;
font-size: 17px;
}
.recommendation-caption {
color: #64748b;
font-size: 7px;
font-weight: 800;
letter-spacing: 1px;
}
.recommendation-content > strong {
margin: 7px 0;
color: #ffffff;
font-size: 20px;
}
.recommendation-content p {
margin: 0 0 20px;
color: #7f91a8;
font-size: 9px;
line-height: 1.6;
}
.secondary-button {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 12px;
border: 1px solid rgba(56, 189, 248, 0.16);
border-radius: 7px;
background: rgba(56, 189, 248, 0.07);
color: #7dd3fc;
font-size: 8px;
font-weight: 700;
text-decoration: none;
transition: 0.2s ease;
}
.secondary-button:hover {
background: rgba(56, 189, 248, 0.13);
}
/* =========================================================
PREDICTION
========================================================= */
.prediction-summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.prediction-main,
.prediction-level {
min-height: 105px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 15px;
border: 1px solid #edf0f4;
border-radius: 9px;
background: #f8fafc;
}
.prediction-main span,
.prediction-level span {
color: #94a3b8;
font-size: 8px;
font-weight: 600;
}
.prediction-main strong {
margin: 5px 0 2px;
color: #0f172a;
font-size: 27px;
}
.prediction-main small {
color: #64748b;
font-size: 8px;
}
.prediction-level strong {
margin-top: 7px;
color: #0284c7;
font-size: 18px;
}
/* =========================================================
INTERSECTION VIEW
========================================================= */
.intersection-view {
min-height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px;
border: 1px solid #edf0f4;
border-radius: 9px;
background: #f8fafc;
}
.intersection-north,
.intersection-south {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: #64748b;
font-size: 7px;
font-weight: 800;
}
.intersection-north i,
.intersection-south i {
color: #0284c7;
font-size: 13px;
}
.intersection-middle {
width: 100%;
display: grid;
grid-template-columns: 1fr 55px 1fr;
align-items: center;
margin: 9px 0;
}
.intersection-middle > div:not(.intersection-center) {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
color: #64748b;
font-size: 7px;
font-weight: 800;
}
.intersection-middle i {
color: #0284c7;
}
.intersection-center {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
border-radius: 50%;
background: #0f172a;
color: #38bdf8;
font-size: 17px;
}
/* =========================================================
SCROLLBAR
========================================================= */
.sidebar::-webkit-scrollbar {
width: 4px;
}
.sidebar::-webkit-scrollbar-track {
background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #26374d;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1150px) {
.summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-main-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.direction-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-lower-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.sidebar {
position: relative;
width: 100%;
height: auto;
}
.main-content {
margin-left: 0;
padding: 20px;
}
.dashboard-header {
flex-direction: column;
}
.dashboard-date {
align-items: flex-start;
}
.summary-grid,
.direction-card-grid,
.prediction-summary {
grid-template-columns: 1fr;
}
}
/* =========================================================
TRAFFIC MONITORING
========================================================= */
.monitoring-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
gap: 14px;
margin-bottom: 14px;
}
.monitoring-video-panel {
min-height: 390px;
}
.live-indicator {
display: flex;
align-items: center;
gap: 6px;
color: #dc2626;
font-size: 8px;
font-weight: 800;
letter-spacing: 1px;
}
.live-indicator span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 8px rgba(239, 68, 68, 0.55);
}
.camera-placeholder {
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px dashed #cbd5e1;
border-radius: 10px;
background:
linear-gradient(
145deg,
#0b1728,
#13243a
);
color: #ffffff;
}
.camera-placeholder-icon {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
border-radius: 50%;
background: rgba(56, 189, 248, 0.10);
color: #38bdf8;
font-size: 20px;
}
.camera-placeholder strong {
font-size: 14px;
}
.camera-placeholder p {
margin: 5px 0;
color: #94a3b8;
font-size: 10px;
}
.camera-placeholder small {
color: #64748b;
font-size: 8px;
}
/* FORM */
.traffic-count-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.traffic-input-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.traffic-input-group {
display: flex;
flex-direction: column;
gap: 7px;
}
.traffic-input-group label {
display: flex;
align-items: center;
gap: 7px;
color: #64748b;
font-size: 9px;
font-weight: 700;
}
.traffic-input-group label i {
color: #0284c7;
}
.traffic-input-group input {
width: 100%;
height: 42px;
padding: 0 12px;
border: 1px solid #dce3eb;
border-radius: 8px;
outline: none;
background: #f8fafc;
color: #0f172a;
font-size: 12px;
}
.traffic-input-group input:focus {
border-color: #38bdf8;
box-shadow:
0 0 0 3px
rgba(56, 189, 248, 0.08);
}
/* GUIDE */
.congestion-guide {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.congestion-guide > div {
padding: 10px;
border: 1px solid #edf0f4;
border-radius: 8px;
background: #f8fafc;
}
.guide-dot {
display: block;
width: 7px;
height: 7px;
margin-bottom: 6px;
border-radius: 50%;
}
.guide-dot.low {
background: #10b981;
}
.guide-dot.moderate {
background: #f59e0b;
}
.guide-dot.high {
background: #ef4444;
}
.congestion-guide strong,
.congestion-guide small {
display: block;
}
.congestion-guide strong {
color: #334155;
font-size: 9px;
}
.congestion-guide small {
margin-top: 2px;
color: #94a3b8;
font-size: 8px;
}
/* SAVE BUTTON */
.admin-primary-button {
min-height: 43px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 0;
border-radius: 8px;
background:
linear-gradient(
135deg,
#0284c7,
#2563eb
);
color: #ffffff;
font-size: 9px;
font-weight: 750;
cursor: pointer;
}
.admin-primary-button:hover {
opacity: 0.92;
}
/* ALERT */
.admin-alert {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 14px;
padding: 11px 13px;
border-radius: 8px;
font-size: 9px;
font-weight: 600;
}
.admin-alert.success {
color: #047857;
background: #ecfdf5;
border: 1px solid #a7f3d0;
}
.admin-alert.error {
color: #b91c1c;
background: #fef2f2;
border: 1px solid #fecaca;
}
/* CURRENT DIRECTION CARDS */
.monitor-direction-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.monitor-direction-card {
padding: 16px;
border: 1px solid #edf0f4;
border-radius: 10px;
background: #f8fafc;
}
.monitor-direction-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.monitor-direction-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: #0284c7;
background: #e0f2fe;
font-size: 11px;
}
.monitor-direction-name {
display: block;
margin-bottom: 5px;
color: #64748b;
font-size: 9px;
font-weight: 650;
}
.monitor-direction-card > strong {
display: block;
color: #0f172a;
font-size: 26px;
}
.monitor-direction-card > small {
color: #94a3b8;
font-size: 8px;
}
.monitor-recorded-time {
margin-top: 15px;
padding-top: 10px;
border-top: 1px solid #e5eaf0;
color: #94a3b8;
font-size: 8px;
}
.monitor-recorded-time i {
margin-right: 4px;
}
/* RESPONSIVE */
@media (max-width: 1050px) {
.monitoring-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 850px) {
.monitor-direction-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.traffic-input-grid,
.monitor-direction-grid,
.congestion-guide {
grid-template-columns: 1fr;
}
}
/* =========================================================
TRAFFIC RECORDS
========================================================= */
.records-filter-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.records-filter-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.filter-field {
display: flex;
flex-direction: column;
gap: 7px;
}
.filter-field label {
color: #64748b;
font-size: 9px;
font-weight: 700;
}
.filter-field input,
.filter-field select {
width: 100%;
height: 41px;
padding: 0 11px;
border: 1px solid #dce3eb;
border-radius: 8px;
outline: none;
background: #f8fafc;
color: #334155;
font-size: 10px;
}
.filter-field input:focus,
.filter-field select:focus {
border-color: #38bdf8;
box-shadow:
0 0 0 3px
rgba(56, 189, 248, 0.08);
}
.records-filter-actions {
display: flex;
align-items: center;
gap: 8px;
}
.records-filter-actions .admin-primary-button {
width: auto;
min-width: 125px;
padding: 0 15px;
}
.admin-secondary-button {
min-height: 43px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 15px;
border: 1px solid #dce3eb;
border-radius: 8px;
background: #ffffff;
color: #64748b;
font-size: 9px;
font-weight: 700;
text-decoration: none;
}
.admin-secondary-button:hover {
color: #0f172a;
background: #f8fafc;
}
/* TABLE */
.records-table-wrapper {
width: 100%;
overflow-x: auto;
}
.records-table {
width: 100%;
border-collapse: collapse;
font-size: 9px;
}
.records-table th {
padding: 11px 12px;
border-bottom: 1px solid #e5eaf0;
background: #f8fafc;
color: #64748b;
font-size: 8px;
font-weight: 800;
text-align: left;
white-space: nowrap;
}
.records-table td {
padding: 12px;
border-bottom: 1px solid #eef2f6;
color: #64748b;
vertical-align: middle;
}
.records-table tbody tr:hover {
background: #fafcff;
}
.record-date strong,
.record-date span {
display: block;
}
.record-date strong {
color: #334155;
font-size: 9px;
}
.record-date span {
margin-top: 3px;
color: #94a3b8;
font-size: 8px;
}
.record-direction {
display: flex;
align-items: center;
gap: 8px;
color: #334155;
font-weight: 600;
}
.record-direction-icon {
width: 27px;
height: 27px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: #e0f2fe;
color: #0284c7;
font-size: 9px;
}
.record-count {
color: #0f172a;
font-size: 11px;
}
/* EMPTY */
.records-empty-state {
min-height: 180px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #94a3b8;
}
.records-empty-state > i {
margin-bottom: 10px;
color: #cbd5e1;
font-size: 25px;
}
.records-empty-state strong {
color: #64748b;
font-size: 10px;
}
.records-empty-state span {
margin-top: 5px;
font-size: 8px;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.records-filter-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 550px) {
.records-filter-grid {
grid-template-columns: 1fr;
}
.records-filter-actions {
flex-direction: column;
align-items: stretch;
}
.records-filter-actions .admin-primary-button,
.admin-secondary-button {
width: 100%;
}
}
/* =========================================================
PREDICTIONS PAGE
========================================================= */
.prediction-model-status {
display: flex;
align-items: center;
gap: 6px;
color: #94a3b8;
font-size: 7px;
font-weight: 800;
letter-spacing: 0.7px;
}
.prediction-model-status span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #94a3b8;
}
.prediction-model-status span.connected {
background: #22c55e;
box-shadow: 0 0 7px rgba(34, 197, 94, 0.5);
}
/* DIRECTION CARDS */
.prediction-direction-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.prediction-direction-card {
padding: 16px;
border: 1px solid #edf0f4;
border-radius: 10px;
background: #f8fafc;
}
.prediction-direction-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.prediction-direction-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #e0f2fe;
color: #0284c7;
font-size: 11px;
}
.prediction-direction-name {
display: block;
margin-bottom: 5px;
color: #64748b;
font-size: 9px;
font-weight: 700;
}
.prediction-count {
display: flex;
align-items: flex-end;
gap: 5px;
}
.prediction-count strong {
color: #0f172a;
font-size: 27px;
line-height: 1;
}
.prediction-count span {
padding-bottom: 2px;
color: #94a3b8;
font-size: 8px;
}
.prediction-card-footer {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 15px;
padding-top: 11px;
border-top: 1px solid #e5eaf0;
color: #94a3b8;
font-size: 7px;
}
/* MAIN AREA */
.prediction-main-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 14px;
margin-top: 14px;
}
/* EMPTY MODEL */
.prediction-empty-model {
min-height: 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.prediction-empty-model > div {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
border-radius: 50%;
background: #e0f2fe;
color: #0284c7;
font-size: 20px;
}
.prediction-empty-model strong {
color: #334155;
font-size: 12px;
}
.prediction-empty-model p {
max-width: 390px;
margin: 7px 0 0;
color: #94a3b8;
font-size: 9px;
line-height: 1.7;
}
/* LATEST PREDICTION */
.latest-prediction-display {
min-height: 230px;
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
border-radius: 12px;
background: linear-gradient(145deg, #071626, #10283e);
color: #ffffff;
}
.latest-prediction-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 15px;
background: rgba(56, 189, 248, 0.1);
color: #38bdf8;
font-size: 21px;
}
.latest-prediction-content > span {
color: #64748b;
font-size: 7px;
font-weight: 800;
letter-spacing: 1px;
}
.latest-prediction-content h3 {
margin: 6px 0 15px;
font-size: 17px;
}
.latest-prediction-values {
display: flex;
gap: 30px;
}
.latest-prediction-values span,
.latest-prediction-values strong {
display: block;
}
.latest-prediction-values span {
color: #64748b;
font-size: 7px;
}
.latest-prediction-values strong {
margin-top: 3px;
color: #ffffff;
font-size: 18px;
}
.latest-prediction-content small {
display: block;
margin-top: 15px;
color: #64748b;
font-size: 7px;
}
/* PROCESS */
.prediction-process {
display: flex;
flex-direction: column;
}
.prediction-process-item {
display: flex;
align-items: center;
gap: 12px;
}
.prediction-process-item > span {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 8px;
background: #e0f2fe;
color: #0284c7;
font-size: 8px;
font-weight: 800;
}
.prediction-process-item strong,
.prediction-process-item small {
display: block;
}
.prediction-process-item strong {
color: #334155;
font-size: 9px;
}
.prediction-process-item small {
margin-top: 2px;
color: #94a3b8;
font-size: 7px;
}
.prediction-process-line {
width: 1px;
height: 18px;
margin-left: 16px;
background: #dbe4ee;
}
/* FILTER */
.prediction-filter-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
/* RESPONSIVE */
@media (max-width: 1000px) {
.prediction-direction-grid {
grid-template-columns: repeat(2, 1fr);
}
.prediction-main-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.prediction-direction-grid,
.prediction-filter-grid {
grid-template-columns: 1fr;
}
.latest-prediction-display {
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================================
PREDICTIONS PAGE
========================================================= */
.prediction-model-status {
display: flex;
align-items: center;
gap: 6px;
color: #94a3b8;
font-size: 7px;
font-weight: 800;
letter-spacing: 0.7px;
}
.prediction-model-status span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #94a3b8;
}
.prediction-model-status span.connected {
background: #22c55e;
box-shadow: 0 0 7px rgba(34, 197, 94, 0.5);
}
/* DIRECTION CARDS */
.prediction-direction-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.prediction-direction-card {
padding: 16px;
border: 1px solid #edf0f4;
border-radius: 10px;
background: #f8fafc;
}
.prediction-direction-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.prediction-direction-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: #e0f2fe;
color: #0284c7;
font-size: 11px;
}
.prediction-direction-name {
display: block;
margin-bottom: 5px;
color: #64748b;
font-size: 9px;
font-weight: 700;
}
.prediction-count {
display: flex;
align-items: flex-end;
gap: 5px;
}
.prediction-count strong {
color: #0f172a;
font-size: 27px;
line-height: 1;
}
.prediction-count span {
padding-bottom: 2px;
color: #94a3b8;
font-size: 8px;
}
.prediction-card-footer {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 15px;
padding-top: 11px;
border-top: 1px solid #e5eaf0;
color: #94a3b8;
font-size: 7px;
}
/* MAIN AREA */
.prediction-main-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 14px;
margin-top: 14px;
}
/* EMPTY MODEL */
.prediction-empty-model {
min-height: 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.prediction-empty-model > div {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
border-radius: 50%;
background: #e0f2fe;
color: #0284c7;
font-size: 20px;
}
.prediction-empty-model strong {
color: #334155;
font-size: 12px;
}
.prediction-empty-model p {
max-width: 390px;
margin: 7px 0 0;
color: #94a3b8;
font-size: 9px;
line-height: 1.7;
}
/* LATEST PREDICTION */
.latest-prediction-display {
min-height: 230px;
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
border-radius: 12px;
background: linear-gradient(145deg, #071626, #10283e);
color: #ffffff;
}
.latest-prediction-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 15px;
background: rgba(56, 189, 248, 0.1);
color: #38bdf8;
font-size: 21px;
}
.latest-prediction-content > span {
color: #64748b;
font-size: 7px;
font-weight: 800;
letter-spacing: 1px;
}
.latest-prediction-content h3 {
margin: 6px 0 15px;
font-size: 17px;
}
.latest-prediction-values {
display: flex;
gap: 30px;
}
.latest-prediction-values span,
.latest-prediction-values strong {
display: block;
}
.latest-prediction-values span {
color: #64748b;
font-size: 7px;
}
.latest-prediction-values strong {
margin-top: 3px;
color: #ffffff;
font-size: 18px;
}
.latest-prediction-content small {
display: block;
margin-top: 15px;
color: #64748b;
font-size: 7px;
}
/* PROCESS */
.prediction-process {
display: flex;
flex-direction: column;
}
.prediction-process-item {
display: flex;
align-items: center;
gap: 12px;
}
.prediction-process-item > span {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 8px;
background: #e0f2fe;
color: #0284c7;
font-size: 8px;
font-weight: 800;
}
.prediction-process-item strong,
.prediction-process-item small {
display: block;
}
.prediction-process-item strong {
color: #334155;
font-size: 9px;
}
.prediction-process-item small {
margin-top: 2px;
color: #94a3b8;
font-size: 7px;
}
.prediction-process-line {
width: 1px;
height: 18px;
margin-left: 16px;
background: #dbe4ee;
}
/* FILTER */
.prediction-filter-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
/* RESPONSIVE */
@media (max-width: 1000px) {
.prediction-direction-grid {
grid-template-columns: repeat(2, 1fr);
}
.prediction-main-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 650px) {
.prediction-direction-grid,
.prediction-filter-grid {
grid-template-columns: 1fr;
}
.latest-prediction-display {
flex-direction: column;
align-items: flex-start;
}
}
/* =========================================================
DECISION SUPPORT
========================================================= */
.decision-main-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
gap: 14px;
margin-bottom: 14px;
}
/* INTERSECTION */
.decision-intersection-panel {
min-height: 480px;
}
.decision-intersection {
min-height: 380px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
border: 1px solid #e7ecf2;
border-radius: 12px;
background:
linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)),
repeating-linear-gradient(
45deg,
#f1f5f9,
#f1f5f9 10px,
#e8edf3 10px,
#e8edf3 20px
);
}
.decision-horizontal {
width: 100%;
display: grid;
grid-template-columns: 1fr 120px 1fr;
align-items: center;
}
.decision-road {
display: flex;
align-items: center;
gap: 8px;
color: #64748b;
}
.decision-road span {
font-size: 8px;
font-weight: 700;
}
.decision-road strong {
color: #0f172a;
font-size: 18px;
}
.decision-road small {
padding: 3px 6px;
border-radius: 20px;
background: #e2e8f0;
color: #64748b;
font-size: 6px;
font-weight: 700;
}
.decision-road i {
color: #0284c7;
}
.decision-road.north,
.decision-road.south {
flex-direction: column;
}
.decision-road.north {
margin-bottom: 20px;
}
.decision-road.south {
margin-top: 20px;
}
.decision-road.west {
justify-content: flex-end;
}
.decision-road.east {
justify-content: flex-start;
}
.decision-center {
width: 105px;
height: 105px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: auto;
border-radius: 50%;
background: #0b192a;
box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
}
.decision-center > div {
color: #38bdf8;
font-size: 19px;
}
.decision-center span {
margin-top: 6px;
color: #94a3b8;
font-size: 6px;
font-weight: 700;
text-align: center;
line-height: 1.4;
}
/* RECOMMENDATION */
.decision-recommendation-card {
min-height: 480px;
padding: 21px;
border: 1px solid #17304a;
border-radius: 12px;
background:
linear-gradient(
150deg,
#071522,
#0c2136
);
color: #ffffff;
}
.decision-ai-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.decision-ai-header > div:first-child > span {
color: #38bdf8;
font-size: 7px;
font-weight: 800;
letter-spacing: 1.2px;
}
.decision-ai-header h2 {
margin: 5px 0 0;
color: #ffffff;
font-size: 15px;
}
.decision-brain {
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
margin: 35px 0 17px;
border: 1px solid rgba(56, 189, 248, .17);
border-radius: 15px;
background: rgba(56, 189, 248, .08);
color: #38bdf8;
font-size: 20px;
}
.decision-caption {
display: block;
color: #64748b;
font-size: 7px;
font-weight: 800;
letter-spacing: 1px;
}
.decision-priority {
display: block;
margin: 7px 0 16px;
color: #ffffff;
font-size: 25px;
}
.decision-reason {
display: flex;
gap: 9px;
padding: 12px;
border: 1px solid rgba(255,255,255,.05);
border-radius: 8px;
background: rgba(255,255,255,.03);
}
.decision-reason i {
margin-top: 2px;
color: #38bdf8;
font-size: 10px;
}
.decision-reason p {
margin: 0;
color: #8999ad;
font-size: 8px;
line-height: 1.6;
}
.decision-ai-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 14px;
}
.decision-ai-details > div {
padding: 11px;
border-radius: 8px;
background: rgba(255,255,255,.03);
}
.decision-ai-details span,
.decision-ai-details strong {
display: block;
}
.decision-ai-details span {
color: #64748b;
font-size: 7px;
}
.decision-ai-details strong {
margin-top: 4px;
color: #e2e8f0;
font-size: 9px;
}
.decision-disclaimer {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 17px;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,.06);
color: #64748b;
font-size: 7px;
line-height: 1.5;
}
.decision-disclaimer i {
color: #38bdf8;
}
/* COMPARISON */
.direction-comparison {
display: grid;
gap: 20px;
}
.comparison-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.comparison-header > div {
display: flex;
align-items: center;
gap: 8px;
color: #64748b;
font-size: 9px;
font-weight: 700;
}
.comparison-header i {
color: #0284c7;
}
.comparison-header strong {
color: #0f172a;
font-size: 12px;
}
.comparison-track {
height: 8px;
overflow: hidden;
border-radius: 20px;
background: #edf2f7;
}
.comparison-fill {
height: 100%;
border-radius: 20px;
transition: width .5s ease;
}
.comparison-fill.ns {
background: linear-gradient(90deg, #0284c7, #38bdf8);
}
.comparison-fill.ew {
background: linear-gradient(90deg, #f59e0b, #fb923c);
}
/* PROCESS */
.decision-process-grid {
display: grid;
grid-template-columns: 1fr 40px 1fr 40px 1fr 40px 1fr;
align-items: center;
}
.decision-process-card {
position: relative;
min-height: 165px;
padding: 16px;
border: 1px solid #edf0f4;
border-radius: 10px;
background: #f8fafc;
}
.decision-process-card > span {
position: absolute;
top: 12px;
right: 12px;
color: #cbd5e1;
font-size: 8px;
font-weight: 800;
}
.decision-process-card > div {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
border-radius: 9px;
background: #e0f2fe;
color: #0284c7;
}
.decision-process-card strong {
display: block;
color: #334155;
font-size: 9px;
}
.decision-process-card p {
margin: 6px 0 0;
color: #94a3b8;
font-size: 7px;
line-height: 1.6;
}
.decision-process-arrow {
text-align: center;
color: #cbd5e1;
font-size: 10px;
}
/* RESPONSIVE */
@media (max-width: 1050px) {
.decision-main-grid {
grid-template-columns: 1fr;
}
.decision-process-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.decision-process-arrow {
transform: rotate(90deg);
}
}
@media (max-width: 650px) {
.decision-horizontal {
grid-template-columns: 1fr 75px 1fr;
}
.decision-center {
width: 70px;
height: 70px;
}
.decision-road span {
display: none;
}
}
/* =========================================================
TRAFFIC ALERTS
========================================================= */
.alert-filter-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
/* ALERT LIST */
.alerts-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.traffic-alert-card {
display: grid;
grid-template-columns: 42px 1fr auto;
align-items: center;
gap: 14px;
padding: 14px;
border: 1px solid #e8edf3;
border-radius: 10px;
background: #ffffff;
}
.traffic-alert-card.active {
border-left: 3px solid #ef4444;
}
.traffic-alert-card.resolved {
border-left: 3px solid #10b981;
}
.traffic-alert-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #fee2e2;
color: #dc2626;
font-size: 14px;
}
.traffic-alert-card.resolved .traffic-alert-icon {
background: #d1fae5;
color: #059669;
}
/* CONTENT */
.traffic-alert-header {
display: flex;
justify-content: space-between;
gap: 15px;
}
.traffic-alert-type {
display: block;
color: #0284c7;
font-size: 7px;
font-weight: 800;
letter-spacing: 1px;
text-transform: uppercase;
}
.traffic-alert-header h3 {
margin: 5px 0 0;
color: #334155;
font-size: 10px;
font-weight: 650;
line-height: 1.5;
}
.traffic-alert-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 9px;
color: #94a3b8;
font-size: 7px;
}
.traffic-alert-meta span {
display: flex;
align-items: center;
gap: 5px;
}
/* STATUS */
.alert-status-badge {
flex-shrink: 0;
height: fit-content;
padding: 4px 8px;
border-radius: 20px;
font-size: 7px;
font-weight: 800;
}
.alert-status-badge.active {
color: #b91c1c;
background: #fee2e2;
}
.alert-status-badge.resolved {
color: #047857;
background: #d1fae5;
}
/* ACTION */
.resolve-alert-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 34px;
padding: 0 11px;
border: 1px solid #bbf7d0;
border-radius: 7px;
background: #ecfdf5;
color: #047857;
font-size: 8px;
font-weight: 700;
cursor: pointer;
}
.resolve-alert-button:hover {
background: #d1fae5;
}
.resolved-info {
display: flex;
align-items: center;
gap: 8px;
color: #10b981;
}
.resolved-info > i {
font-size: 15px;
}
.resolved-info strong,
.resolved-info span {
display: block;
}
.resolved-info strong {
font-size: 8px;
}
.resolved-info span {
margin-top: 2px;
color: #94a3b8;
font-size: 7px;
}
/* EMPTY */
.alerts-empty-state {
min-height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.alerts-empty-state > div {
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 13px;
border-radius: 50%;
background: #f1f5f9;
color: #94a3b8;
font-size: 20px;
}
.alerts-empty-state strong {
color: #64748b;
font-size: 10px;
}
.alerts-empty-state p {
max-width: 360px;
margin: 6px 0 0;
color: #94a3b8;
font-size: 8px;
line-height: 1.6;
}
/* RESPONSIVE */
@media (max-width: 750px) {
.alert-filter-grid {
grid-template-columns: 1fr;
}
.traffic-alert-card {
grid-template-columns: 40px 1fr;
}
.traffic-alert-action {
grid-column: 2;
}
}
/* =========================================================
REPORTS
========================================================= */
.report-filter-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.report-export-button {
min-height: 43px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 15px;
border: 1px solid #fecaca;
border-radius: 8px;
background: #fff;
color: #dc2626;
font-size: 9px;
font-weight: 700;
cursor: pointer;
}
.report-export-button:hover {
background: #fef2f2;
}
/* REPORT DOCUMENT */
.report-document {
margin-top: 14px;
overflow: hidden;
border: 1px solid #e5eaf0;
border-radius: 12px;
background: #fff;
}
.report-document-header {
display: grid;
grid-template-columns: 1fr 1.3fr 1fr;
align-items: center;
gap: 20px;
padding: 22px;
background: linear-gradient(145deg, #071626, #0d2238);
color: #fff;
}
.report-brand {
display: flex;
align-items: center;
gap: 10px;
}
.report-logo {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: linear-gradient(135deg, #0ea5e9, #2563eb);
font-size: 15px;
}
.report-brand strong,
.report-brand span {
display: block;
}
.report-brand strong {
font-size: 11px;
}
.report-brand span {
margin-top: 2px;
color: #7f91a8;
font-size: 7px;
}
.report-title {
text-align: center;
}
.report-title > span {
color: #38bdf8;
font-size: 7px;
font-weight: 800;
letter-spacing: 1px;
}
.report-title h2 {
margin: 5px 0;
font-size: 16px;
}
.report-title p {
margin: 0;
color: #7f91a8;
font-size: 8px;
}
.report-generated {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.report-generated span {
color: #64748b;
font-size: 7px;
}
.report-generated strong {
margin-top: 3px;
font-size: 9px;
}
.report-generated small {
margin-top: 2px;
color: #64748b;
font-size: 7px;
}
/* SUMMARY */
.report-summary-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid #edf0f4;
}
.report-stat {
padding: 20px;
border-right: 1px solid #edf0f4;
}
.report-stat:last-child {
border-right: 0;
}
.report-stat span,
.report-stat strong,
.report-stat small {
display: block;
}
.report-stat span {
color: #64748b;
font-size: 8px;
font-weight: 700;
}
.report-stat strong {
margin: 8px 0 3px;
color: #0f172a;
font-size: 21px;
}
.report-stat small {
color: #94a3b8;
font-size: 7px;
}
/* SECTIONS */
.report-section {
padding: 22px;
border-bottom: 1px solid #edf0f4;
}
.report-section:last-child {
border-bottom: 0;
}
.report-section-header {
margin-bottom: 15px;
}
.report-section-header span {
color: #0284c7;
font-size: 7px;
font-weight: 800;
letter-spacing: 1px;
}
.report-section-header h3 {
margin: 4px 0 0;
color: #334155;
font-size: 13px;
}
/* BARS */
.report-bars {
display: grid;
gap: 14px;
}
.report-bar-label {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
color: #64748b;
font-size: 8px;
}
.report-bar-label strong {
color: #334155;
}
.report-bar-track {
height: 8px;
overflow: hidden;
border-radius: 20px;
background: #eef2f6;
}
.report-bar-fill {
height: 100%;
border-radius: 20px;
}
.report-bar-fill.low {
background: #10b981;
}
.report-bar-fill.moderate {
background: #f59e0b;
}
.report-bar-fill.high {
background: #ef4444;
}
/* DIRECTION */
.report-direction-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.report-direction-card {
padding: 15px;
border: 1px solid #edf0f4;
border-radius: 9px;
background: #f8fafc;
}
.report-direction-card > div {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
border-radius: 7px;
background: #e0f2fe;
color: #0284c7;
font-size: 9px;
}
.report-direction-card span,
.report-direction-card strong,
.report-direction-card small {
display: block;
}
.report-direction-card span {
color: #64748b;
font-size: 8px;
}
.report-direction-card strong {
margin: 5px 0 1px;
color: #0f172a;
font-size: 20px;
}
.report-direction-card small {
color: #94a3b8;
font-size: 7px;
}
/* PEAK */
.peak-report-card {
display: grid;
grid-template-columns: 45px 1fr auto;
align-items: center;
gap: 13px;
padding: 15px;
border: 1px solid #fed7aa;
border-radius: 9px;
background: #fff7ed;
}
.peak-report-icon {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #ffedd5;
color: #ea580c;
font-size: 15px;
}
.peak-report-card > div:nth-child(2) span {
display: block;
color: #9a3412;
font-size: 7px;
}
.peak-report-card > div:nth-child(2) strong {
display: block;
margin: 3px 0;
color: #7c2d12;
font-size: 18px;
}
.peak-report-card p {
margin: 0;
color: #c2410c;
font-size: 7px;
}
.report-no-data {
padding: 30px;
color: #94a3b8;
font-size: 9px;
text-align: center;
}
/* PRINT */
@media print {
.sidebar,
.dashboard-header,
.dashboard-panel,
.records-filter-actions {
display: none !important;
}
.main-content {
margin: 0;
padding: 0;
background: #fff;
}
.report-document {
margin: 0;
border: 0;
border-radius: 0;
}
body {
background: #fff;
}
}
/* RESPONSIVE */
@media (max-width: 950px) {
.report-filter-grid,
.report-summary-grid,
.report-direction-grid {
grid-template-columns: repeat(2, 1fr);
}
.report-document-header {
grid-template-columns: 1fr;
text-align: center;
}
.report-brand {
justify-content: center;
}
.report-generated {
align-items: center;
}
}
@media (max-width: 600px) {
.report-filter-grid,
.report-summary-grid,
.report-direction-grid {
grid-template-columns: 1fr;
}
.peak-report-card {
grid-template-columns: 42px 1fr;
}
}
/* =========================================================
CCTV DEVICES
========================================================= */
.cctv-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.cctv-form-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.cctv-form-actions {
display: flex;
}
.cctv-form-actions .admin-primary-button {
width: auto;
padding: 0 16px;
}
/* DEVICE CARDS */
.cctv-device-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.cctv-device-card {
overflow: hidden;
border: 1px solid #e7ecf2;
border-radius: 11px;
background: #fff;
}
.cctv-device-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eef2f6;
background: #f8fafc;
}
.cctv-device-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #e0f2fe;
color: #0284c7;
font-size: 14px;
}
.device-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
border-radius: 20px;
font-size: 7px;
font-weight: 800;
}
.device-status > span {
width: 6px;
height: 6px;
border-radius: 50%;
}
.device-status.online {
color: #047857;
background: #d1fae5;
}
.device-status.online > span {
background: #10b981;
}
.device-status.offline {
color: #b91c1c;
background: #fee2e2;
}
.device-status.offline > span {
background: #ef4444;
}
.device-status.maintenance {
color: #b45309;
background: #fef3c7;
}
.device-status.maintenance > span {
background: #f59e0b;
}
/* INFO */
.cctv-device-info {
padding: 16px;
}
.cctv-device-info h3 {
margin: 0 0 15px;
color: #1e293b;
font-size: 12px;
}
.cctv-info-row {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 10px;
color: #64748b;
font-size: 8px;
line-height: 1.5;
}
.cctv-info-row:last-child {
margin-bottom: 0;
}
.cctv-info-row i {
width: 13px;
margin-top: 1px;
color: #94a3b8;
text-align: center;
}
/* FOOTER */
.cctv-device-footer {
padding: 11px 16px;
border-top: 1px solid #eef2f6;
}
.cctv-edit-button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border: 1px solid #dbe3ec;
border-radius: 7px;
background: #fff;
color: #64748b;
font-size: 8px;
font-weight: 700;
cursor: pointer;
}
.cctv-edit-button:hover {
color: #0284c7;
border-color: #bae6fd;
background: #f0f9ff;
}
/* EMPTY */
.cctv-empty-state {
grid-column: 1 / -1;
min-height: 230px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.cctv-empty-state > div {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
border-radius: 50%;
background: #f1f5f9;
color: #94a3b8;
font-size: 18px;
}
.cctv-empty-state strong {
color: #64748b;
font-size: 10px;
}
.cctv-empty-state p {
max-width: 320px;
margin: 6px 0 0;
color: #94a3b8;
font-size: 8px;
line-height: 1.6;
}
/* =========================================================
ADMIN MODAL
========================================================= */
.admin-modal {
position: fixed;
inset: 0;
z-index: 3000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
.admin-modal.show {
display: flex;
}
.admin-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(5, 15, 28, .60);
backdrop-filter: blur(3px);
}
.admin-modal-dialog {
position: relative;
z-index: 1;
width: min(460px, 100%);
overflow: hidden;
border-radius: 12px;
background: #fff;
box-shadow: 0 30px 70px rgba(15, 23, 42, .24);
}
.admin-modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 17px 19px;
border-bottom: 1px solid #edf0f4;
}
.admin-modal-header span {
color: #0284c7;
font-size: 7px;
font-weight: 800;
letter-spacing: 1px;
}
.admin-modal-header h3 {
margin: 4px 0 0;
color: #1e293b;
font-size: 14px;
}
.admin-modal-header button {
width: 31px;
height: 31px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 7px;
background: #f8fafc;
color: #94a3b8;
cursor: pointer;
}
.admin-modal-body {
display: grid;
gap: 13px;
padding: 19px;
}
.admin-modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 14px 19px;
border-top: 1px solid #edf0f4;
background: #f8fafc;
}
.admin-modal-footer .admin-primary-button,
.admin-modal-footer .admin-secondary-button {
width: auto;
min-width: 105px;
}
/* RESPONSIVE */
@media (max-width: 1050px) {
.cctv-form-grid {
grid-template-columns: repeat(2, 1fr);
}
.cctv-device-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 650px) {
.cctv-form-grid,
.cctv-device-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
TRAFFIC DIRECTIONS
========================================================= */
.direction-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.direction-form-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
}
.direction-form-actions {
display: flex;
}
.direction-form-actions .admin-primary-button {
width: auto;
padding: 0 16px;
}
/* DIRECTION MANAGEMENT */
.direction-management-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.direction-management-card {
overflow: hidden;
border: 1px solid #e7ecf2;
border-radius: 11px;
background: #fff;
}
.direction-management-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eef2f6;
background: #f8fafc;
}
.direction-management-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #e0f2fe;
color: #0284c7;
font-size: 14px;
}
.direction-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
border-radius: 20px;
font-size: 7px;
font-weight: 800;
}
.direction-status > span {
width: 6px;
height: 6px;
border-radius: 50%;
}
.direction-status.active {
color: #047857;
background: #d1fae5;
}
.direction-status.active > span {
background: #10b981;
}
.direction-status.inactive {
color: #64748b;
background: #e2e8f0;
}
.direction-status.inactive > span {
background: #94a3b8;
}
/* BODY */
.direction-management-body {
padding: 17px;
}
.direction-code {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 25px;
height: 20px;
padding: 0 6px;
border-radius: 5px;
background: #e0f2fe;
color: #0284c7;
font-size: 8px;
font-weight: 800;
}
.direction-management-body h3 {
margin: 8px 0 16px;
color: #1e293b;
font-size: 12px;
}
.direction-management-stats {
display: grid;
gap: 9px;
}
.direction-management-stats > div {
padding: 9px;
border-radius: 7px;
background: #f8fafc;
}
.direction-management-stats span,
.direction-management-stats strong {
display: block;
}
.direction-management-stats span {
color: #94a3b8;
font-size: 7px;
}
.direction-management-stats strong {
margin-top: 3px;
color: #475569;
font-size: 9px;
}
/* FOOTER */
.direction-management-footer {
padding: 11px 16px;
border-top: 1px solid #eef2f6;
}
/* RESPONSIVE */
@media (max-width: 1050px) {
.direction-management-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 700px) {
.direction-form-grid,
.direction-management-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
USER ACCOUNTS
========================================================= */
.user-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.user-form-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.user-form-actions {
display: flex;
}
.user-form-actions .admin-primary-button {
width: auto;
padding: 0 16px;
}
/* USER CARDS */
.user-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.user-account-card {
overflow: hidden;
border: 1px solid #e7ecf2;
border-radius: 11px;
background: #fff;
}
.user-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eef2f6;
background: #f8fafc;
}
.user-card-avatar {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #0284c7, #2563eb);
color: #fff;
font-size: 13px;
font-weight: 800;
}
/* BODY */
.user-card-body {
padding: 16px;
}
.user-card-body h3 {
margin: 0;
color: #1e293b;
font-size: 12px;
}
.user-role {
display: inline-block;
margin: 5px 0 16px;
padding: 4px 7px;
border-radius: 5px;
background: #e0f2fe;
color: #0284c7;
font-size: 7px;
font-weight: 700;
}
.user-detail-row {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 9px;
color: #64748b;
font-size: 8px;
line-height: 1.5;
}
.user-detail-row:last-child {
margin-bottom: 0;
}
.user-detail-row i {
width: 13px;
margin-top: 1px;
color: #94a3b8;
text-align: center;
}
/* FOOTER */
.user-card-footer {
padding: 11px 16px;
border-top: 1px solid #eef2f6;
}
/* RESPONSIVE */
@media (max-width: 1100px) {
.user-form-grid {
grid-template-columns: repeat(2, 1fr);
}
.user-card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 650px) {
.user-form-grid,
.user-card-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
SETTINGS
========================================================= */
.settings-layout {
display: grid;
grid-template-columns: 225px minmax(0, 1fr);
gap: 14px;
align-items: start;
}
/* SETTINGS NAVIGATION */
.settings-navigation {
padding: 8px;
border: 1px solid #e5eaf0;
border-radius: 11px;
background: #fff;
}
.settings-nav-item {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 11px;
border: 0;
border-radius: 8px;
background: transparent;
color: #64748b;
cursor: pointer;
text-align: left;
transition: .2s ease;
}
.settings-nav-item + .settings-nav-item {
margin-top: 3px;
}
.settings-nav-item > i {
width: 25px;
color: #94a3b8;
text-align: center;
font-size: 11px;
}
.settings-nav-item strong,
.settings-nav-item span {
display: block;
}
.settings-nav-item strong {
color: #475569;
font-size: 9px;
}
.settings-nav-item span {
margin-top: 2px;
color: #94a3b8;
font-size: 7px;
}
.settings-nav-item:hover {
background: #f8fafc;
}
.settings-nav-item.active {
background: #eff8ff;
}
.settings-nav-item.active > i,
.settings-nav-item.active strong {
color: #0284c7;
}
/* CONTENT */
.settings-content {
min-width: 0;
}
.settings-tab {
display: none;
padding: 20px;
border: 1px solid #e5eaf0;
border-radius: 11px;
background: #fff;
}
.settings-tab.active {
display: block;
}
/* HEADER */
.settings-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
margin-bottom: 22px;
}
.settings-panel-header > div:first-child > span {
color: #0284c7;
font-size: 7px;
font-weight: 800;
letter-spacing: 1px;
}
.settings-panel-header h2 {
margin: 5px 0;
color: #1e293b;
font-size: 15px;
}
.settings-panel-header p {
margin: 0;
color: #94a3b8;
font-size: 8px;
line-height: 1.6;
}
.settings-header-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border-radius: 9px;
background: #e0f2fe;
color: #0284c7;
font-size: 13px;
}
/* FORM */
.settings-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.settings-field {
display: flex;
flex-direction: column;
gap: 7px;
}
.settings-field.settings-full-width {
grid-column: 1 / -1;
}
.settings-field label {
color: #64748b;
font-size: 8px;
font-weight: 700;
}
.settings-field input,
.settings-field select {
width: 100%;
height: 42px;
padding: 0 11px;
border: 1px solid #dce3eb;
border-radius: 8px;
outline: none;
background: #f8fafc;
color: #334155;
font-size: 9px;
}
.settings-field input:focus,
.settings-field select:focus {
border-color: #38bdf8;
box-shadow:
0 0 0 3px
rgba(56, 189, 248, .08);
}
.settings-field input[readonly] {
color: #94a3b8;
background: #f1f5f9;
}
.settings-field small {
color: #94a3b8;
font-size: 7px;
line-height: 1.5;
}
.settings-input-suffix {
position: relative;
}
.settings-input-suffix input {
padding-right: 75px;
}
.settings-input-suffix > span {
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
color: #94a3b8;
font-size: 7px;
}
/* THRESHOLD PREVIEW */
.settings-threshold-preview {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-height: 42px;
align-items: center;
}
.settings-threshold-preview span {
padding: 6px 8px;
border-radius: 20px;
font-size: 7px;
font-weight: 800;
}
.threshold-low {
color: #047857;
background: #d1fae5;
}
.threshold-moderate {
color: #b45309;
background: #fef3c7;
}
.threshold-high {
color: #b91c1c;
background: #fee2e2;
}
/* DIVIDER */
.settings-divider {
height: 1px;
margin: 22px 0;
background: #edf0f4;
}
/* TOGGLES */
.settings-toggle-list {
display: grid;
gap: 10px;
}
.settings-toggle-list.compact {
margin: 17px 0;
}
.settings-toggle-row {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 13px;
border: 1px solid #edf0f4;
border-radius: 9px;
background: #f8fafc;
cursor: pointer;
}
.settings-toggle-row > div {
flex: 1;
}
.settings-toggle-row strong,
.settings-toggle-row > div > span {
display: block;
}
.settings-toggle-row strong {
color: #475569;
font-size: 9px;
}
.settings-toggle-row > div > span {
margin-top: 3px;
color: #94a3b8;
font-size: 7px;
line-height: 1.5;
}
.settings-toggle-row input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.settings-switch {
position: relative;
width: 35px;
height: 19px;
flex-shrink: 0;
border-radius: 20px;
background: #cbd5e1;
transition: .2s ease;
}
.settings-switch::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(15, 23, 42, .15);
transition: .2s ease;
}
.settings-toggle-row input:checked + .settings-switch {
background: #0284c7;
}
.settings-toggle-row input:checked + .settings-switch::after {
transform: translateX(16px);
}
/* ACTIONS */
.settings-actions {
display: flex;
justify-content: flex-end;
margin-top: 22px;
padding-top: 17px;
border-top: 1px solid #edf0f4;
}
.settings-actions .admin-primary-button {
width: auto;
padding: 0 16px;
}
/* =========================================================
AI SETTINGS
========================================================= */
.ai-setting-card {
padding: 16px;
border: 1px solid #e7ecf2;
border-radius: 10px;
background: #fafcff;
}
.ai-setting-card + .ai-setting-card {
margin-top: 13px;
}
.ai-setting-heading {
display: grid;
grid-template-columns: 38px 1fr auto;
align-items: center;
gap: 10px;
}
.ai-setting-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
background: #e0f2fe;
color: #0284c7;
font-size: 13px;
}
.ai-setting-icon.qlearning {
color: #7c3aed;
background: #ede9fe;
}
.ai-setting-heading strong,
.ai-setting-heading span {
display: block;
}
.ai-setting-heading strong {
color: #334155;
font-size: 10px;
}
.ai-setting-heading span {
margin-top: 2px;
color: #94a3b8;
font-size: 7px;
}
.model-connection-badge {
padding: 5px 8px;
border-radius: 20px;
background: #fef3c7;
color: #b45309;
font-size: 7px;
font-weight: 800;
}
.ai-settings-warning {
display: flex;
gap: 9px;
margin-top: 14px;
padding: 12px;
border: 1px solid #bae6fd;
border-radius: 8px;
background: #f0f9ff;
color: #0369a1;
}
.ai-settings-warning i {
margin-top: 1px;
}
.ai-settings-warning p {
margin: 0;
font-size: 7px;
line-height: 1.6;
}
/* =========================================================
SYSTEM INFO
========================================================= */
.system-info-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.system-info-card {
padding: 15px;
border: 1px solid #edf0f4;
border-radius: 9px;
background: #f8fafc;
}
.system-info-card span,
.system-info-card strong,
.system-info-card small {
display: block;
}
.system-info-card span {
color: #94a3b8;
font-size: 7px;
}
.system-info-card strong {
margin: 5px 0 3px;
color: #334155;
font-size: 11px;
}
.system-info-card small {
color: #94a3b8;
font-size: 7px;
}
.system-status-list {
margin-top: 18px;
border: 1px solid #edf0f4;
border-radius: 9px;
overflow: hidden;
}
.system-status-list > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 12px 14px;
border-bottom: 1px solid #edf0f4;
font-size: 8px;
}
.system-status-list > div:last-child {
border-bottom: 0;
}
.system-status-list span {
display: flex;
align-items: center;
gap: 8px;
color: #64748b;
}
.system-status-list span i {
width: 14px;
color: #94a3b8;
text-align: center;
}
.system-status-list strong {
font-size: 7px;
}
.system-ok {
color: #059669;
}
.system-pending {
color: #d97706;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.settings-layout {
grid-template-columns: 1fr;
}
.settings-navigation {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}
.settings-nav-item + .settings-nav-item {
margin-top: 0;
}
}
@media (max-width: 600px) {
.settings-navigation,
.settings-form-grid,
.system-info-grid {
grid-template-columns: 1fr;
}
.ai-setting-heading {
grid-template-columns: 38px 1fr;
}
.model-connection-badge {
grid-column: 1 / -1;
width: fit-content;
}
}