/* =====================================================
   RESET
===================================================== */

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

body{
font-family:Segoe UI, Arial, sans-serif;
background:#f4f6f9;
color:#333;
}


/* =====================================================
   HEADER
===================================================== */

.header{
position:fixed;
top:0;
left:0;
right:0;

height:60px;

display:flex;
align-items:center;

padding:0 20px;

background:#2c3e50;
color:#fff;

font-size:18px;
font-weight:600;

z-index:1000;
}


/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{
position:fixed;
top:60px;
left:0;

width:230px;
height:calc(100vh - 60px);

background:#34495e;

overflow:auto;
}

.sidebar a{
display:block;
padding:12px 18px;

color:#fff;
text-decoration:none;

font-size:14px;

transition:0.2s;
}

.sidebar a:hover{
background:#2c3e50;
}


/* =====================================================
   CONTENT
===================================================== */

.content-wrapper{
margin-left:230px;
margin-top:60px;

padding:25px;

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

background:#f4f6f9;
}


/* =====================================================
   PAGE TITLE
===================================================== */

.page-title{
font-size:22px;
font-weight:600;
margin-bottom:20px;
}


/* =====================================================
   BUTTON
===================================================== */

.btn{
display:inline-block;

padding:9px 16px;

background:#3498db;
color:#fff;

border:none;
border-radius:4px;

font-size:14px;

cursor:pointer;
text-decoration:none;

transition:0.2s;
}

.btn:hover{
background:#2980b9;
}

.btn-secondary{
background:#7f8c8d;
}

.btn-secondary:hover{
background:#6c7a7b;
}


/* =====================================================
   TABLE
===================================================== */

.table-wrapper{
background:#fff;
padding:20px;
border-radius:6px;

box-shadow:0 2px 6px rgba(0,0,0,0.08);
}

.table-kapal{
width:100%;
border-collapse:collapse;
}

.table-kapal th{
background:#34495e;
color:#fff;

padding:10px;
font-size:14px;
text-align:left;
}

.table-kapal td{
padding:10px;
font-size:14px;

border-bottom:1px solid #eee;
}

.table-kapal tr:hover{
background:#f5f5f5;
}


/* =====================================================
   DASHBOARD CARD
===================================================== */

.dashboard{
display:flex;
flex-wrap:wrap;

gap:20px;

margin-top:20px;
}

.card{
width:200px;

background:#fff;

padding:20px;

border-radius:6px;

box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.card h3{
font-size:14px;
margin-bottom:8px;
}

.card h1{
font-size:26px;
font-weight:bold;
}


/* =====================================================
   CARD COLORS
===================================================== */

.card-blue{background:#3498db;color:#fff;}
.card-green{background:#2ecc71;color:#fff;}
.card-orange{background:#f39c12;color:#fff;}
.card-red{background:#e74c3c;color:#fff;}


/* =====================================================
   FORM CARD
===================================================== */

.form-card{
width:500px;

background:#fff;

padding:25px;

border-radius:6px;

box-shadow:0 2px 8px rgba(0,0,0,0.08);
}


/* =====================================================
   FORM GRID
===================================================== */

.form-grid{
display:grid;

grid-template-columns:1fr 1fr;

gap:15px 20px;
}

.form-group{
display:flex;
flex-direction:column;
}

.form-group label{
font-size:14px;
font-weight:500;
margin-bottom:5px;
}

.form-group input,
.form-group select{
padding:8px;

border:1px solid #ccc;
border-radius:4px;

font-size:14px;

transition:0.2s;
}

.form-group input:focus,
.form-group select:focus{
border-color:#3498db;
outline:none;
}


/* =====================================================
   FORM ACTION
===================================================== */

.form-action{
margin-top:20px;

display:flex;
gap:10px;
}