/*
====================================================
Satel GPON Tools - Professional Stylesheet
====================================================
*/

body {

   margin:0;
   padding:0;

   background:#f5f7fa;

   font-family:Arial, Helvetica, sans-serif;

   color:#222;
}

/*
====================================================
Layout
====================================================
*/

.page_container {

   width:95%;
   max-width:1700px;

   margin:auto;

   padding:30px;
}

/*
====================================================
Header
====================================================
*/

.header_bar {

   display:flex;

   justify-content:space-between;

   align-items:center;

   flex-wrap:wrap;

   margin-bottom:30px;
}

.header_left {

   display:flex;

   align-items:center;

   gap:25px;
}

.header_left img {

   height:80px;
}

.page_title {

   font-size:48px;

   font-weight:bold;
}

/*
====================================================
Cards
====================================================
*/

.card {

   background:white;

   border-radius:14px;

   padding:25px;

   margin-bottom:30px;

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

.table_title {

   font-size:32px;

   font-weight:bold;

   margin-bottom:25px;

   color:#333;
}

/*
====================================================
Tables
====================================================
*/

table {

   width:100%;

   border-collapse:collapse;

   table-layout:fixed;
}

thead {

   background:#2d6ecf;
}

th {

   color:white;

   text-align:left;

   padding:16px;

   font-size:16px;

   font-weight:bold;
}

td {

   padding:16px;

   border-bottom:1px solid #ddd;

   font-size:16px;

   vertical-align:middle;
}

tbody tr:nth-child(even) {

   background:#f8f9fb;
}

tbody tr:hover {

   background:#eef4ff;
}

/*
====================================================
Fixed Column Widths
====================================================
*/

th:nth-child(1),
td:nth-child(1) {

   width:180px;
}

th:nth-child(2),
td:nth-child(2) {

   width:250px;
}

th:nth-child(3),
td:nth-child(3) {

   width:140px;
}

th:nth-child(4),
td:nth-child(4) {

   width:140px;
}

/*
====================================================
Links
====================================================
*/

a {

   color:#2d6ecf;

   text-decoration:none;

   font-weight:bold;
}

a:hover {

   text-decoration:underline;
}

/*
====================================================
Buttons
====================================================
*/

.back_button,
.action_button,
.menu_button,
.search_button {

   background:#169bd5;

   color:white;

   border:none;

   border-radius:8px;

   padding:12px 24px;

   font-size:20px;

   font-weight:bold;

   cursor:pointer;

   transition:0.2s;

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

.back_button:hover,
.action_button:hover,
.menu_button:hover,
.search_button:hover {

   background:#117fb0;
}

/*
====================================================
Status Badges
====================================================
*/

.status_online {

   background:#27ae60;

   color:white;

   padding:6px 14px;

   border-radius:20px;

   font-size:13px;

   font-weight:bold;

   display:inline-block;
}

.status_offline {

   background:#e67e22;

   color:white;

   padding:6px 14px;

   border-radius:20px;

   font-size:13px;

   font-weight:bold;

   display:inline-block;
}

.status_historical {

   background:#7f8c8d;

   color:white;

   padding:6px 14px;

   border-radius:20px;

   font-size:13px;

   font-weight:bold;

   display:inline-block;
}

.status_red {

   background:#e74c3c;

   color:white;

   padding:6px 14px;

   border-radius:20px;

   font-size:13px;

   font-weight:bold;

   display:inline-block;
}

/*
====================================================
Forms
====================================================
*/

.search_row {

   display:flex;

   align-items:center;

   gap:15px;

   flex-wrap:wrap;
}

input[type=text] {

   width:520px;

   max-width:90%;

   padding:14px;

   font-size:26px;

   border:2px solid #7aa7ff;

   border-radius:8px;

   outline:none;
}

input[type=text]:focus {

   border-color:#2d6ecf;

   box-shadow:0 0 6px rgba(45,110,207,0.4);
}

/*
====================================================
Messages
====================================================
*/

.error {

   background:#fdecea;

   color:#c0392b;

   border:1px solid #f5c6cb;

   padding:14px;

   border-radius:8px;

   margin-bottom:20px;

   font-weight:bold;
}

.success {

   background:#eafaf1;

   color:#1e8449;

   border:1px solid #b7e4c7;

   padding:14px;

   border-radius:8px;

   margin-bottom:20px;

   font-weight:bold;
}

.warning {

   background:#fff3cd;

   color:#856404;

   border:1px solid #ffeeba;

   padding:14px;

   border-radius:8px;

   margin-bottom:20px;

   font-weight:bold;
}

/*
====================================================
Responsive
====================================================
*/

@media screen and (max-width:1000px) {

   .page_title {

      font-size:32px;
   }

   .header_left {

      flex-direction:column;

      align-items:flex-start;
   }

   table {

      font-size:14px;
   }

   th,
   td {

      padding:10px;
   }

   input[type=text] {

      width:100%;
   }

   .search_button {

      width:100%;
   }
}