/*
|--------------------------------------------------------------------------
| CUSTOMER CSS
|--------------------------------------------------------------------------
*/
:root {
    --ptc-primary: #0A84FF;
    --ptc-primary-hover: #0066CC;

    --ptc-bg: #F8FAFC;

    --ptc-dark: #0F172A;

    --ptc-text: #334155;

    --ptc-border: #E2E8F0;

    --ptc-white: #FFFFFF;
}

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

body {
    font-family:
        "Segoe UI",
        Tahoma,
        sans-serif;
    background: var(--ptc-bg);
    color: var(--ptc-text);
}

.badge-success {
    background: #DCFCE7;
    color: #15803D;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.badge-primary {
    background: #DBEAFE;
    color: #1D4ED8;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.badge-info {
    background: #DBEAFE;
    color: #1D4ED8;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.badge-warning {
    background: #FEF3C7;
    color: #B45309;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.badge-danger {
    background: #FEE2E2;
    color: #DC2626;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

/*
|--------------------------------------------------------------------------
| Sidebar & Header
|--------------------------------------------------------------------------
*/

.customer-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    background: #0F172A;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.sidebar-brand {
    padding: 24px;
}

.brand-name {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
}

.brand-name span {
    color: #0A84FF;
}

.brand-tagline {
    font-size: 12px;
    color: #94A3B8;
    margin-top: 5px;
}

.sidebar-menu {
    flex: 1;
    padding: 20px;
}

.menu-item {
    display: block;
    color: #CBD5E1;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.menu-item.active {
    background: #0A84FF;
    color: #fff;
}

.sidebar-footer {
    padding: 24px;
}

.logout-btn {
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: white;
    cursor: pointer;
}

.customer-main {
    flex: 1;
    background: #F8FAFC;
}

.customer-header {
    height: 72px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    border-bottom: 1px solid #E2E8F0;
}

.customer-content {
    padding: 32px;
}

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

.stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow:
        0 2px 10px rgba(0,0,0,.05);
}

.stat-title {
    color: #64748B;
}

.stat-value {
    font-size: 36px;
    font-weight: 700;
    margin-top: 10px;
}

.user-menu {
    position: relative;
}

.user-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    cursor: pointer;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0A84FF;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    padding: 10px 0;
    display: none;
    z-index: 100;
}

.user-dropdown.show {
    display: block;
}

.dropdown-arrow {
    font-size: 12px;
    color: #64748b;
}

.user-dropdown a,
.user-dropdown button {
    display: block;
    width: 100%;
    padding: 12px 18px;
    border: none;
    background: none;
    text-align: left;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Customer Dashboard
|--------------------------------------------------------------------------
*/
.stat-card.services .stat-value {
    color: #2563eb;
}

.stat-card.tickets .stat-value {
    color: #f97316;
}

.stat-card.invoices .stat-value {
    color: #dc2626;
}

.stat-card.expiring .stat-value {
    color: #d97706;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

.dashboard-panel {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(15,23,42,.05);
}

.dashboard-panel h3 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #1e293b;
}

.dashboard-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dashboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.dashboard-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dashboard-meta {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

.ticket-id {
    color: #2563eb;
    font-weight: 700;
}

.dashboard-footer {
    margin-top: 24px;
    text-align: right;
    font-size: 13px;
    color: #64748b;
}

/*
|--------------------------------------------------------------------------
| Customer Profile
|--------------------------------------------------------------------------
*/

.page-header {
    margin-bottom: 30px;
}

.page-header h1 {
    margin-bottom: 8px;
}

.page-subtitle {
    color: #64748B;
}

.profile-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.profile-card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid #E2E8F0;
}

.card-body {
    padding: 24px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

.form-control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
}

textarea.form-control {
    resize: vertical;
}

.btn-primary {
    background: #0A84FF;
    color: #FFFFFF;
    border: 0;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-primary:hover {
    background: #0066CC;
}

.btn-outline {
    border: 1px solid #0A84FF;
    color: #0A84FF;
    background: transparent;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}

.security-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.security-item p {
    margin-top: 4px;
    color: #64748B;
    font-size: 14px;
}

/*
|--------------------------------------------------------------------------
| Customer Services
|--------------------------------------------------------------------------
*/
.service-summary {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.summary-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow:
        0 2px 10px rgba(0,0,0,.05);
}

.summary-title {
    color: #64748B;
    margin-bottom: 10px;
}

.summary-value {
    font-size: 32px;
    font-weight: 700;
}

.summary-value.success {
    color: #16A34A;
}

.summary-value.warning {
    color: #F59E0B;
}

.summary-value.danger {
    color: #DC2626;
}

.service-toolbar {
    margin-bottom: 24px;
}

.service-search {
    width: 100%;
    max-width: 400px;
    padding: 12px 16px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
}

.service-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow:
        0 2px 10px rgba(0,0,0,.05);
}

.service-type {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

.service-type.hosting {
    background: #DBEAFE;
    color: #1D4ED8;
}

.service-type.vps {
    background: #DCFCE7;
    color: #15803D;
}

.service-type.domain {
    background: #FEF3C7;
    color: #B45309;
}

.service-type.email {
    background: #EDE9FE;
    color: #6D28D9;
}

.service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.service-header h3 {
    margin-bottom: 6px;
}

.service-header p {
    color: #64748B;
}

.service-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

.service-host {
    font-size: 16px;
    font-weight: 600;
    color: var(--ptc-text);
}

.service-id {
    margin-top: 4px;
    color: #94A3B8;
    font-size: 14px;
}

.service-info {
    display: grid;
    grid-template-columns:
        1fr 1fr 1fr 1fr auto;
    gap: 20px;
    margin-bottom: 20px;
}

.service-info label {
    display: block;
    color: #64748B;
    margin-bottom: 6px;
    font-size: 14px;
}

.text-success {
    color: #16A34A;
}

.text-warning {
    color: #F59E0B;
}

.text-danger {
    color: #DC2626;
}

.service-actions {
    text-align: right;
}

.service-section {
margin-bottom: 32px;
}

.service-group-header {
margin-bottom: 20px;
}

.service-group-header h2 {
font-size: 24px;
margin-top: 8px;
color: var(--ptc-dark);
}

.service-product {
font-size: 18px;
font-weight: 700;
color: var(--ptc-dark);
margin-bottom: 12px;
}

/*
|--------------------------------------------------------------------------
| Customer Invoices
|--------------------------------------------------------------------------
*/
.invoice-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 24px;
}

.invoice-toolbar {
margin-bottom: 24px;
}

.invoice-search {
width: 100%;
max-width: 400px;
padding: 12px 16px;
border: 1px solid #CBD5E1;
border-radius: 8px;
}

.invoice-list {
display: flex;
flex-direction: column;
gap: 20px;
}

.invoice-card {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.invoice-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.invoice-header h3 {
margin-bottom: 6px;
}

.invoice-header p {
color: #64748B;
}

.invoice-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 20px;
}

.invoice-info label {
display: block;
color: #64748B;
margin-bottom: 6px;
font-size: 14px;
}

.invoice-actions {
text-align: right;
}

/*
|--------------------------------------------------------------------------
| Customer Tickets
|--------------------------------------------------------------------------
*/
.ticket-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 24px;
}

.ticket-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-bottom: 24px;
}

.ticket-search {
width: 100%;
max-width: 400px;
padding: 12px 16px;
border: 1px solid #CBD5E1;
border-radius: 8px;
}

.ticket-list {
display: flex;
flex-direction: column;
gap: 20px;
}

.ticket-card {
background: #fff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.ticket-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.ticket-header h3 {
margin-bottom: 6px;
}

.ticket-header p {
color: #64748B;
}

.ticket-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr auto;
gap: 20px;
}

.ticket-info label {
display: block;
color: #64748B;
margin-bottom: 6px;
font-size: 14px;
}

.ticket-actions {
text-align: right;
}