/* =========================
   Global Styles
========================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f6f8;
    color: #333;
}


/* =========================
   Login Page
========================= */

.login-container {

    width: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

}


.login-box {

    width: 380px;

    background: white;

    padding: 35px;

    border-radius: 10px;

    box-shadow: 0 5px 20px rgba(0,0,0,0.15);

}


.login-box h1 {

    text-align: center;

    margin-bottom: 25px;

}


.form-group {

    margin-bottom: 15px;

}


.form-group label {

    display: block;

    margin-bottom: 5px;

    font-weight: bold;

}


.form-group input {

    width:100%;

    padding:12px;

    border:1px solid #ccc;

    border-radius:5px;

    font-size:15px;

}


button,
.btn {

    width:100%;

    padding:12px;

    border:none;

    border-radius:5px;

    background:#0066cc;

    color:white;

    font-size:16px;

    cursor:pointer;

}


button:hover,
.btn:hover {

    background:#0055aa;

}
.page-btn{
    text-align:right;
    width: auto;
}


.error {

    background:#ffe5e5;

    color:#cc0000;

    padding:10px;

    border-radius:5px;

    margin-bottom:15px;

}


/* =========================
   Dashboard
========================= */


.dashboard {

    padding:30px;

}


.header {

    background:white;

    padding:20px;

    border-radius:8px;

    box-shadow:0 2px 8px rgba(0,0,0,.1);

}


.card-container {

    display:flex;

    gap:20px;

    margin-top:25px;

}


.card {

    background:white;

    padding:20px;

    flex:1;

    border-radius:8px;

    box-shadow:0 2px 8px rgba(0,0,0,.1);

}


/* =========================
   Navigation
========================= */

.nav {

    margin-top:20px;

}


.nav a {

    display:inline-block;

    margin-right:15px;

    text-decoration:none;

    color:#0066cc;

}


.nav a:hover {

    text-decoration:underline;

}

/* =========================
   Alert Feed
========================= */


.alerts-container {

    margin-top:20px;

    display:flex;

    flex-direction:column;

    gap:15px;

}


.alert-card {

    background:white;

    padding:20px;

    border-radius:10px;

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

    border-left:6px solid #999;

}


.alert-card h3 {

    margin:10px 0 5px 0;

}


.alert-card p {

    margin:0;

    color:#555;

}


.alert-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.alert-severity {

    font-weight:bold;

    text-transform:uppercase;

}


.alert-time {

    font-size:12px;

    color:#777;

}


/* Severity colours */

.alert-card.critical {

    border-left-color:red;

}


.alert-card.warning {

    border-left-color:orange;

}


.alert-card.information {

    border-left-color:green;

}


.alert-card.info {

    border-left-color:green;

}

/* ==========================
   USER MANAGEMENT PAGE
========================== */


.page-container {

    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;

}



.page-header {

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;

}



.page-header h1 {

    margin:0;
    font-size:32px;

}



.page-subtitle {

    margin-top:8px;
    color:#666;
    font-size:15px;

}



.btn-primary {

    background:#2563eb;
    color:white;
    padding:12px 20px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:0.2s;

}



.btn-primary:hover {

    background:#1d4ed8;

}



/* USER GRID */


.users-grid {

    display:grid;
    grid-template-columns:
    repeat(auto-fill,minmax(320px,1fr));

    gap:25px;

}



/* USER CARD */


.user-card {

    background:white;
    border-radius:14px;
    padding:25px;

    box-shadow:
    0 4px 15px rgba(0,0,0,0.08);

    transition:transform .2s;

}


.user-card:hover {

    transform:translateY(-3px);

}



/* USER HEADER */


.user-header {

    display:flex;
    align-items:center;
    gap:15px;

    margin-bottom:25px;

}



.user-avatar {

    width:55px;
    height:55px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#2563eb;

    color:white;

    font-size:22px;
    font-weight:bold;

}



.user-header h3 {

    margin:0;

    font-size:20px;

}



.user-email {

    color:#666;
    font-size:14px;

}



/* DETAILS */


.user-details {

    border-top:1px solid #eee;
    padding-top:15px;

}



.detail-row {

    display:flex;
    justify-content:space-between;
    align-items:center;
    column-gap: 20px;
    padding:10px 0;

    text-align: right;
    font-size:14px;

}



.detail-row span {

    color:#666;

}



/* ROLE */


.role-badge {

    background:#eef2ff;

    color:#3730a3;

    padding:5px 10px;

    border-radius:20px;

    font-size:13px;

}



/* STATUS */


.status-active {

    color:#15803d;

}


.status-disabled {

    color:#dc2626;

}



/* EMPTY STATE */


.empty-state {

    background:white;

    padding:40px;

    border-radius:12px;

    text-align:center;

    box-shadow:
    0 4px 15px rgba(0,0,0,.08);

}



/* MOBILE */


@media(max-width:700px){


.page-header {

    flex-direction:column;
    align-items:flex-start;
    gap:20px;

}


.users-grid {

    grid-template-columns:1fr;

}


}

/* ADD USER FORM */


.form-card {

    background:white;

    padding:30px;

    border-radius:14px;

    max-width:600px;

    box-shadow:
    0 4px 15px rgba(0,0,0,.08);

}



.form-group {

    margin-bottom:20px;

}



.form-group label {

    display:block;

    margin-bottom:8px;

    font-weight:600;

}



.form-group input,
.form-group select {

    width:100%;

    padding:12px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:15px;

}



.btn-secondary {

    background:#e5e7eb;

    color:#111827;

    padding:12px 20px;

    border-radius:8px;

    text-decoration:none;

}



.success-message {

    background:#dcfce7;

    color:#166534;

    padding:15px;

    border-radius:8px;

    margin-bottom:20px;

}



.error-message {

    background:#fee2e2;

    color:#991b1b;

    padding:15px;

    border-radius:8px;

    margin-bottom:20px;

}

/* ==========================
   PORTAL LAYOUT
========================== */


.portal-layout {

    display:flex;

    min-height:100vh;

}



/* SIDEBAR */


.sidebar {

    width:260px;

    background:#111827;

    color:white;

    padding:25px;

    position:fixed;

    top:0;

    bottom:0;

}



.sidebar-logo {

    margin-bottom:35px;

}



.sidebar-logo h2 {

    margin:0;

}





/* USER AREA */


.sidebar-user {

    display:flex;

    align-items:center;

    gap:12px;

    padding-bottom:25px;

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

    margin-bottom:25px;

}



.user-circle {


    width:45px;

    height:45px;

    border-radius:50%;

    background:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}



.sidebar-user span {

    display:block;

    font-size:13px;

    opacity:.7;

}





/* MENU */


.sidebar-menu a {


    display:block;

    color:#d1d5db;

    text-decoration:none;

    padding:12px 15px;

    border-radius:8px;

    margin-bottom:8px;


}



.sidebar-menu a:hover {


    background:#1f2937;

    color:white;

}



.sidebar-menu a.active {


    background:#2563eb;

    color:white;


}




/* MAIN CONTENT */


.portal-content {


    margin-left:260px;

    padding:30px;

    width:100%;


}




/* MOBILE */


@media(max-width:800px){


.sidebar {

    width:200px;

}


.portal-content {

    margin-left:200px;

}


}

/* ==========================
   TOP NOTIFICATION BAR
========================== */


.topbar {

    height:70px;

    background:white;

    border-radius:12px;

    margin-bottom:30px;

    padding:0 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:
    0 3px 12px rgba(0,0,0,.08);

}



.topbar h3 {

    margin:0;

    font-size:22px;

}



.topbar-right {


    display:flex;

    align-items:center;

    gap:20px;


}




/* Notifications */


.notification-link {


    position:relative;

    text-decoration:none;

    font-size:24px;

}



.notification-count {


    position:absolute;

    top:-8px;

    right:-10px;

    background:#dc2626;

    color:white;

    font-size:12px;

    width:20px;

    height:20px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

}




/* Critical alert */


.critical-warning {


    background:#fee2e2;

    color:#991b1b;

    padding:8px 14px;

    border-radius:20px;

    font-weight:600;

}





/* System status */


.system-status {


    display:flex;

    align-items:center;

    gap:8px;

    color:#166534;

    font-size:14px;

}



.status-dot {


    width:10px;

    height:10px;

    background:#22c55e;

    border-radius:50%;


}

/* ==========================
   ALERTS PAGE
========================== */


.alerts-container {

    display:flex;

    flex-direction:column;

    gap:20px;

}



.alert-card {


    background:white;

    border-radius:14px;

    padding:25px;

    box-shadow:
    0 4px 15px rgba(0,0,0,.08);


}



.alert-header {


    display:flex;

    justify-content:space-between;

    align-items:flex-start;


}



.alert-header h2 {


    margin:0;

    font-size:22px;


}



.alert-time {


    color:#666;

    font-size:13px;


}




.alert-message {


    margin:20px 0;

    font-size:16px;

    line-height:1.5;


}




.alert-details {


    display:grid;

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


    gap:15px;


    background:#f9fafb;

    padding:15px;

    border-radius:10px;


}





.severity {


    padding:6px 14px;

    border-radius:20px;

    font-size:13px;

    font-weight:bold;


}



.severity-critical {


    background:#fee2e2;

    color:#991b1b;


}



.severity-warning {


    background:#fef3c7;

    color:#92400e;


}



.severity-normal {


    background:#dcfce7;

    color:#166534;


}




.alert-footer {


    margin-top:20px;

    display:flex;

    justify-content:flex-end;


}



.ack-button {


    background:#2563eb;

    color:white;

    border:none;

    padding:12px 20px;

    border-radius:8px;

    cursor:pointer;


}



.ack-button:hover {


    background:#1d4ed8;


}



.acknowledged {


    color:#166534;

    background:#dcfce7;

    padding:10px 15px;

    border-radius:8px;


}

/* Companies */

.data-table {

width:100%;
border-collapse:collapse;
background:white;

}


.data-table th {

text-align:left;
padding:14px;
border-bottom:1px solid #ddd;

}



.data-table td {

padding:14px;
border-bottom:1px solid #eee;

}



.data-table tr:hover {

background:#f8fafc;

}



.status-active {

display:inline-block;

padding:5px 12px;

border-radius:20px;

background:#dcfce7;

color:#166534;

font-size:13px;

}

/* Forms */


.form-card {

background:white;
padding:30px;
border-radius:12px;
max-width:600px;

}



.form-group {

margin-bottom:20px;

}



.form-group label {

display:block;
margin-bottom:8px;
font-weight:600;

}



.form-group input {

width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:6px;
font-size:15px;

}



.error {

background:#fee2e2;
color:#991b1b;
padding:12px;
border-radius:8px;
margin-bottom:20px;

}



.btn-secondary {

display:inline-block;
margin-left:10px;
padding:10px 20px;
background:#e5e7eb;
color:#111;
border-radius:6px;
text-decoration:none;

}
/* Company Page */


.stats-grid {

display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-bottom:30px;

}



.stat-card {

background:white;
padding:25px;
border-radius:12px;
text-align:center;

}



.stat-card strong {

display:block;
font-size:32px;
margin-top:10px;

}





.content-card {

background:white;
padding:25px;
border-radius:12px;
margin-bottom:25px;

}




.details-table {

width:100%;
border-collapse:collapse;

}



.details-table th {

text-align:left;
width:200px;
padding:12px;

}



.details-table td {

padding:12px;

}




.management-links {

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;

}



.management-card {

background:#f8fafc;
padding:20px;
border-radius:10px;
text-decoration:none;
color:inherit;

}


.management-card:hover {

background:#eef2ff;

}

.btn-danger {

display:inline-block;
padding:8px 14px;
background:#fee2e2;
color:#991b1b;
border-radius:6px;
text-decoration:none;

}


.btn-danger:hover {

background:#fecaca;

}

.card{

    background:#fff;

    border-radius:10px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:0 2px 8px rgba(0,0,0,.1);

}

.card h2{

    margin-top:0;

}

.card p{

    margin:8px 0;

}

/* =====================================================
   LICENCE DASHBOARD
===================================================== */

.licence-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(420px,1fr));

    gap:25px;

}


.dashboard-card{

    background:#fff;

    border-radius:12px;

    padding:25px;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}


.card-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:20px;

}


.card-header h2{

    margin:0;

}


.licence-type{

    color:#666;

    margin-top:5px;

}


.status-badge{

    padding:8px 15px;

    border-radius:20px;

    color:#fff;

    font-weight:bold;

    font-size:13px;

}


.badge-green{

    background:#2ecc71;

}


.badge-orange{

    background:#f39c12;

}


.badge-red{

    background:#e74c3c;

}


.badge-grey{

    background:#7f8c8d;

}


.days-remaining{

    color:#666;

    margin-bottom:25px;

}


.usage-block{

    margin-bottom:20px;

}


.usage-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:6px;

    font-weight:bold;

}


.progress{

    width:100%;

    height:12px;

    background:#ececec;

    border-radius:20px;

    overflow:hidden;

}


.progress-fill{

    height:100%;

    background:#3498db;

}


.card-footer{

    margin-top:25px;

    text-align:right;

}

/* =====================================================
   LICENCE HISTORY TIMELINE
===================================================== */


.timeline {

    margin-top:30px;

    border-left:3px solid #3498db;

    padding-left:30px;

}



.timeline-item {

    background:white;

    padding:20px;

    margin-bottom:25px;

    border-radius:10px;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

    position:relative;

}



.timeline-item:before {

    content:"";

    width:14px;

    height:14px;

    background:#3498db;

    border-radius:50%;

    position:absolute;

    left:-39px;

    top:25px;

}



.timeline-date {

    color:#777;

    font-size:14px;

    margin-bottom:10px;

}



.changes {

    margin-top:20px;

}



.change-row {

    background:#f7f7f7;

    padding:12px;

    margin-bottom:10px;

    border-radius:6px;

}



.old-value {

    color:#e74c3c;

}



.new-value {

    color:#27ae60;

}

/* ==========================================
   SITE MANAGEMENT LAYOUT
========================================== */


.site-company-panel,
.site-actions-panel {

    margin-bottom:20px;

}



.site-company-panel h2,
.site-actions-panel h2 {

    margin-bottom:15px;

}



.company-select {

    width:300px;

    padding:10px;

    border-radius:6px;

}



.sites-container {

    display:flex;

    flex-direction:column;

    gap:15px;

}



.site-card {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

    border-radius:10px;

}

/* 
|--------------------------------------------------------------------------
| Data Lists
|--------------------------------------------------------------------------
*/

.data-list {
    display:flex;
    flex-direction:column;
    gap:15px;
}


.data-list-item {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:20px;

}



.data-list-content {

    flex:1;

    min-width:0;

}



.data-list-content h3 {

    margin:0 0 10px 0;

}



.data-list-content p {

    margin:4px 0;

}



.data-list-actions {

    display:flex;

    align-items:center;

    gap:10px;

    flex-shrink:0;

}
@media(max-width:768px){

    .data-list-item {

        flex-direction:column;

        align-items:flex-start;

    }


    .data-list-actions {

        width:100%;

    }


    .data-list-actions .btn {

        width:100%;

        text-align:center;

    }

}

body{

font-family:Arial, sans-serif;

}


.subscriptions{

padding:30px;

}


.layout{

display:flex;

gap:25px;

}


.groups{

width:320px;

border-right:1px solid #ddd;

padding-right:20px;

}



.group{

padding:15px;

cursor:pointer;

border-bottom:1px solid #eee;

}



.group:hover{

background:#f5f5f5;

}



.group.active{

background:#dcecff;

}



.users{

flex:1;

}



.user{

padding:12px;

border-bottom:1px solid #eee;

}



button{

margin-top:25px;

padding:12px 25px;

background:#1677ff;

border:0;

color:white;

border-radius:5px;

cursor:pointer;

}


button:hover{

opacity:.85;

}