/******************************************************************************
 Willoway Enterprise Design System
 Swift OPS-A
 Version 2.0
******************************************************************************/

/********************************************************
 RESET
********************************************************/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

height:100%;

scroll-behavior:smooth;

}

body{

background:#f3f6fb;

font-family:

"Segoe UI",
Arial,
Helvetica,
sans-serif;

font-size:15px;

line-height:1.6;

color:#23384d;

min-height:100vh;

overflow-x:hidden;

}

/********************************************************
 VARIABLES
********************************************************/

:root{

--primary:#16395d;
--secondary:#1f4f7f;

--accent:#1976d2;

--success:#1ea95d;

--warning:#e49a14;

--danger:#c62828;

--background:#f3f6fb;

--card:#ffffff;

--border:#dce4ec;

--text:#23384d;

--light:#74879b;

--radius:14px;

--shadow:

0 10px 30px rgba(20,40,80,.10);

}

/********************************************************
 LINKS
********************************************************/

a{

color:inherit;

text-decoration:none;

transition:.25s;

}

a:hover{

color:var(--accent);

}

/********************************************************
 PAGE LAYOUT
********************************************************/

.page-wrapper{

margin-left:260px;

margin-top:72px;

width:calc(100% - 260px);

min-height:calc(100vh - 72px);

padding:35px;

background:var(--background);

box-sizing:border-box;

}

/********************************************************
 DASHBOARD WRAPPER
********************************************************/

.dashboard-wrapper{

width:100%;

max-width:1700px;

margin:0 auto;

padding:0;

}

/********************************************************
 PAGE TITLES
********************************************************/

.page-title{

font-size:42px;

font-weight:700;

margin-bottom:10px;

color:var(--primary);

}

.page-subtitle{

font-size:18px;

margin-bottom:35px;

color:var(--light);

}

/********************************************************
 GRID
********************************************************/

.dashboard-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(520px,1fr));

gap:30px;

align-items:start;

margin-bottom:35px;

}

/********************************************************
 WIDE SECTIONS
********************************************************/

.dashboard-wide{

width:100%;

margin-top:35px;

}

/********************************************************
 HORIZONTAL RULE
********************************************************/

hr{

border:none;

border-top:1px solid var(--border);

margin:35px 0;

}
/******************************************************************************
 PART 2
 TOP BAR • SIDEBAR • ENTERPRISE NAVIGATION
******************************************************************************/

/********************************************************
TOP BAR
********************************************************/

.topbar{

position:fixed;

top:0;

left:260px;

right:0;

height:72px;

background:#ffffff;

border-bottom:1px solid var(--border);

display:flex;

align-items:center;

justify-content:space-between;

padding:0 30px;

z-index:1000;

box-shadow:0 4px 14px rgba(0,0,0,.05);

}

.logo-area{

display:flex;

align-items:center;

gap:15px;

}

.logo-image{

width:48px;

height:48px;

border-radius:50%;

object-fit:cover;

}

.logo-text{

display:flex;

flex-direction:column;

}

.logo-text h1{

font-size:24px;

font-weight:700;

color:var(--primary);

line-height:1.2;

}

.logo-text p{

font-size:13px;

color:var(--light);

margin-top:2px;

}

/********************************************************
SEARCH
********************************************************/

.search-area{

display:flex;

align-items:center;

}

.search-area input{

width:340px;

padding:12px 16px;

border:1px solid var(--border);

border-radius:10px;

background:#f8fafc;

font-size:14px;

transition:.25s;

}

.search-area input:focus{

outline:none;

background:#ffffff;

border-color:var(--accent);

box-shadow:0 0 0 4px rgba(25,118,210,.12);

}

/********************************************************
STATUS AREA
********************************************************/

.status-area{

display:flex;

align-items:center;

gap:12px;

font-size:14px;

font-weight:600;

}

.online-dot{

width:10px;

height:10px;

border-radius:50%;

background:var(--success);

display:inline-block;

}

/********************************************************
USER AREA
********************************************************/

.user-area{

text-align:right;

}

.user-area strong{

display:block;

color:var(--primary);

font-size:15px;

}

.user-area small{

display:block;

font-size:12px;

color:var(--light);

margin-top:2px;

}

/********************************************************
LOGOUT BUTTON
********************************************************/

.logout-button{

display:inline-block;

padding:10px 18px;

background:var(--danger);

color:#ffffff;

border-radius:10px;

font-weight:600;

transition:.25s;

}

.logout-button:hover{

background:#a81f1f;

color:#ffffff;

}

/********************************************************
SIDEBAR
********************************************************/

.sidebar{

position:fixed;

top:0;

left:0;

bottom:0;

width:260px;

background:#132238;

color:#ffffff;

overflow-y:auto;

overflow-x:hidden;

box-shadow:5px 0 18px rgba(0,0,0,.18);

z-index:1100;

}

/********************************************************
SIDEBAR HEADER
********************************************************/

.sidebar-header{

padding:28px 24px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.sidebar-header h2{

font-size:28px;

font-weight:700;

margin-bottom:6px;

}

.sidebar-header p{

font-size:13px;

color:#9fb2c7;

}

/********************************************************
SIDEBAR SEARCH
********************************************************/

.sidebar-search{

padding:18px;

}

.sidebar-search input{

width:100%;

padding:12px;

border:none;

border-radius:10px;

background:#21344d;

color:#ffffff;

font-size:14px;

}

.sidebar-search input::placeholder{

color:#a9bed2;

}

/********************************************************
SECTION TITLES
********************************************************/

.sidebar-title{

padding:18px 24px 10px;

font-size:11px;

letter-spacing:2px;

font-weight:700;

text-transform:uppercase;

color:#8da6bf;

}

/********************************************************
MENU LINKS
********************************************************/

.sidebar a{

display:block;

padding:13px 24px;

font-size:15px;

color:#dbe8f5;

border-left:4px solid transparent;

transition:all .25s ease;

}

.sidebar a:hover{

background:#1d3450;

border-left-color:#3da9ff;

padding-left:30px;

}

.sidebar a.active,

.active-menu{

background:#214265;

border-left-color:#46adff;

font-weight:700;

}

/********************************************************
DIVIDERS
********************************************************/

.sidebar hr{

border:none;

border-top:1px solid rgba(255,255,255,.08);

margin:16px 0;

}

/********************************************************
FOOTER
********************************************************/

.sidebar-footer{

padding:24px;

font-size:12px;

line-height:1.8;

color:#9db4cb;

text-align:center;

}
/******************************************************************************
 PART 3
 ENTERPRISE COMPONENTS
******************************************************************************/

/********************************************************
CARDS
********************************************************/

.dashboard-card,
.panel,
.info-card{

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

padding:28px;

box-shadow:var(--shadow);

margin-bottom:28px;

transition:all .25s ease;

}

.dashboard-card:hover,
.panel:hover,
.info-card:hover{

transform:translateY(-3px);

box-shadow:0 18px 40px rgba(15,35,65,.15);

}

.dashboard-card h1{

font-size:34px;

margin-bottom:15px;

color:var(--primary);

}

.dashboard-card h2{

font-size:24px;

margin-bottom:20px;

color:var(--primary);

}

.dashboard-card h3{

font-size:19px;

margin-bottom:12px;

color:var(--secondary);

}

.dashboard-card p{

color:var(--light);

line-height:1.7;

}

/********************************************************
METRIC CARDS
********************************************************/

.metric-card{

background:#ffffff;

border:1px solid var(--border);

border-radius:16px;

padding:28px;

text-align:center;

box-shadow:var(--shadow);

}

.metric-number{

font-size:44px;

font-weight:700;

color:var(--accent);

margin-bottom:10px;

}

.metric-title{

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

color:var(--light);

}

/********************************************************
FORMS
********************************************************/

form{

margin-top:10px;

}

label{

display:block;

margin-top:18px;

margin-bottom:8px;

font-weight:600;

color:var(--primary);

}

input[type=text],
input[type=password],
input[type=email],
input[type=date],
input[type=number],
input[type=file],
select,
textarea{

width:100%;

padding:14px 16px;

font-size:15px;

background:#ffffff;

border:1px solid var(--border);

border-radius:10px;

transition:all .25s ease;

}

textarea{

resize:vertical;

min-height:120px;

}

input:focus,
select:focus,
textarea:focus{

outline:none;

border-color:var(--accent);

box-shadow:0 0 0 4px rgba(25,118,210,.12);

}

/********************************************************
BUTTONS
********************************************************/

button,
.dashboard-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 24px;

border:none;

border-radius:10px;

background:var(--accent);

color:#ffffff;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:all .25s ease;

}

button:hover,
.dashboard-button:hover{

transform:translateY(-2px);

filter:brightness(1.05);

}

.button-success{

background:var(--success);

}

.button-warning{

background:var(--warning);

color:#1d1d1d;

}

.button-danger{

background:var(--danger);

}

/********************************************************
TABLES
********************************************************/

table{

width:100%;

border-collapse:collapse;

background:#ffffff;

border-radius:12px;

overflow:hidden;

box-shadow:var(--shadow);

}

.status-table{

margin-top:18px;

}

.status-table th{

background:var(--primary);

color:#ffffff;

padding:16px;

text-align:left;

font-size:14px;

}

.status-table td{

padding:15px;

border-bottom:1px solid #edf1f5;

vertical-align:top;

}

.status-table tr:nth-child(even){

background:#f8fbfe;

}

.status-table tr:hover{

background:#eef5fc;

}

/********************************************************
STATUS BADGES
********************************************************/

.status-online{

display:inline-block;

padding:5px 12px;

border-radius:30px;

background:var(--success);

color:#ffffff;

font-size:12px;

font-weight:700;

}

.status-warning{

display:inline-block;

padding:5px 12px;

border-radius:30px;

background:var(--warning);

color:#ffffff;

font-size:12px;

font-weight:700;

}

.status-danger{

display:inline-block;

padding:5px 12px;

border-radius:30px;

background:var(--danger);

color:#ffffff;

font-size:12px;

font-weight:700;

}

/********************************************************
ALERTS
********************************************************/

.success{

padding:18px;

margin-bottom:25px;

background:#dcfce7;

border-left:5px solid var(--success);

border-radius:10px;

}

.warning{

padding:18px;

margin-bottom:25px;

background:#fff6dc;

border-left:5px solid var(--warning);

border-radius:10px;

}

.error{

padding:18px;

margin-bottom:25px;

background:#ffe4e4;

border-left:5px solid var(--danger);

border-radius:10px;

}

/********************************************************
PANELS
********************************************************/

.panel-title{

font-size:22px;

font-weight:700;

margin-bottom:20px;

color:var(--primary);

}

.info-card{

border-left:6px solid var(--accent);

}

/********************************************************
STATISTICS GRID
********************************************************/

.stat-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:22px;

margin:25px 0;

}

.stat-box{

background:#ffffff;

border-radius:14px;

padding:24px;

text-align:center;

box-shadow:var(--shadow);

}

.stat-box h2{

font-size:36px;

color:var(--accent);

margin-bottom:8px;

}

.stat-box p{

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

color:var(--light);

}
/******************************************************************************
 PART 4
 TIMELINE • REPOSITORY • UTILITIES • RESPONSIVE
******************************************************************************/

/********************************************************
TIMELINE
********************************************************/

.timeline{

position:relative;

margin:25px 0;

padding-left:35px;

}

.timeline:before{

content:"";

position:absolute;

left:10px;

top:0;

bottom:0;

width:3px;

background:#d9e4ef;

}

.timeline-item{

position:relative;

background:#ffffff;

border:1px solid var(--border);

border-radius:14px;

padding:20px;

margin-bottom:22px;

box-shadow:var(--shadow);

}

.timeline-item:before{

content:"";

position:absolute;

left:-31px;

top:22px;

width:18px;

height:18px;

border-radius:50%;

background:var(--accent);

border:4px solid #ffffff;

box-shadow:0 0 0 2px var(--accent);

}

.timeline-title{

font-size:18px;

font-weight:700;

margin-bottom:6px;

color:var(--primary);

}

.timeline-date{

font-size:13px;

color:var(--light);

margin-bottom:12px;

}

/********************************************************
REPOSITORY GRID
********************************************************/

.repository-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:24px;

margin-top:25px;

}

.repository-card{

background:#ffffff;

border-radius:16px;

border:1px solid var(--border);

padding:24px;

box-shadow:var(--shadow);

transition:.25s;

}

.repository-card:hover{

transform:translateY(-3px);

box-shadow:0 18px 40px rgba(15,35,65,.14);

}

.repository-card h3{

margin-bottom:12px;

color:var(--primary);

}

.repository-meta{

font-size:13px;

color:var(--light);

margin-top:15px;

}

/********************************************************
SEARCH BAR
********************************************************/

.search-box{

margin-bottom:30px;

}

.search-box input{

width:100%;

padding:16px;

border-radius:12px;

border:1px solid var(--border);

font-size:15px;

}

.search-box input:focus{

outline:none;

border-color:var(--accent);

box-shadow:0 0 0 4px rgba(25,118,210,.12);

}

/********************************************************
BADGES
********************************************************/

.badge{

display:inline-block;

padding:5px 12px;

border-radius:25px;

background:#eef4fb;

color:var(--primary);

font-size:12px;

font-weight:700;

margin-right:6px;

margin-bottom:6px;

}

.badge-success{

background:#dcfce7;

color:#166534;

}

.badge-warning{

background:#fff3cd;

color:#8a6200;

}

.badge-danger{

background:#ffe5e5;

color:#b91c1c;

}

/********************************************************
CODEX BLOCK
********************************************************/

.codex-entry{

background:#ffffff;

padding:28px;

border-radius:16px;

border-left:6px solid var(--accent);

box-shadow:var(--shadow);

margin-bottom:25px;

}

.codex-entry h2{

margin-bottom:12px;

}

.codex-entry p{

line-height:1.8;

}

/********************************************************
REPLAY MEMORY
********************************************************/

.memory-card{

background:#ffffff;

padding:24px;

border-radius:16px;

box-shadow:var(--shadow);

border-top:5px solid var(--accent);

margin-bottom:25px;

}

.memory-card h3{

margin-bottom:10px;

color:var(--primary);

}

/********************************************************
FOOTER
********************************************************/

.footer{

margin-top:60px;

padding:25px;

text-align:center;

font-size:13px;

color:var(--light);

border-top:1px solid var(--border);

}

/********************************************************
UTILITY CLASSES
********************************************************/

.text-center{

text-align:center;

}

.text-right{

text-align:right;

}

.text-left{

text-align:left;

}

.hidden{

display:none;

}

.w-100{

width:100%;

}

.mt-10{

margin-top:10px;

}

.mt-20{

margin-top:20px;

}

.mt-30{

margin-top:30px;

}

.mt-40{

margin-top:40px;

}

.mb-10{

margin-bottom:10px;

}

.mb-20{

margin-bottom:20px;

}

.mb-30{

margin-bottom:30px;

}

.mb-40{

margin-bottom:40px;

}

/********************************************************
SCROLLBAR
********************************************************/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf3f8;

}

::-webkit-scrollbar-thumb{

background:#9fb3c8;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#6e8aa5;

}

/********************************************************
ANIMATIONS
********************************************************/

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.dashboard-card,
.metric-card,
.panel,
.repository-card,
.timeline-item,
.memory-card{

animation:fadeIn .35s ease;

}

/********************************************************
RESPONSIVE
********************************************************/

@media(max-width:1100px){

.topbar{

left:0;

padding:15px 20px;

}

.sidebar{

position:relative;

width:100%;

height:auto;

}

.page-wrapper{

margin-left:0;

margin-top:100px;

width:100%;

padding:20px;

}

.dashboard-wrapper{

max-width:100%;

}

.dashboard-grid{

grid-template-columns:1fr;

}

.search-area{

display:none;

}

}

@media(max-width:768px){

.topbar{

flex-direction:column;

height:auto;

gap:15px;

}

.logo-area{

flex-direction:column;

text-align:center;

}

.user-area{

text-align:center;

}

.dashboard-card{

padding:20px;

}

.repository-grid{

grid-template-columns:1fr;

}

.status-table{

display:block;

overflow-x:auto;

}

button,

.dashboard-button{

width:100%;

}

}

/********************************************************
VERSION
********************************************************/

.version{

margin-top:30px;

text-align:center;

font-size:12px;

letter-spacing:1px;

color:#8ca1b7;

}
/******************************************************************************
 FOOTER
******************************************************************************/

.footer{

margin-top:50px;

padding:24px 30px;

background:#ffffff;

border-top:1px solid var(--border);

box-shadow:0 -2px 10px rgba(0,0,0,.04);

}

.footer-container{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.footer-left{

font-size:14px;

color:var(--primary);

}

.footer-center{

font-size:13px;

color:var(--light);

text-align:center;

flex:1;

}

.footer-right{

font-size:13px;

color:var(--light);

text-align:right;

}

@media(max-width:768px){

.footer-container{

flex-direction:column;

text-align:center;

}

.footer-left,

.footer-center,

.footer-right{

text-align:center;

}

}