/* ============================================================
   INCI4ME - PORTAL MODERN UI
   Restyling condiviso per area utente, amministrazione,
   restrizioni, piani, ordini, pagamenti e ticket.
   Solo presentazione: nessuna logica applicativa.
   ============================================================ */

.portal-page {
    --ui-bg: #f6f7f9;
    --ui-surface: #ffffff;
    --ui-surface-soft: #fafbfc;
    --ui-border: #e5e7eb;
    --ui-border-strong: #d7dce2;
    --ui-text: #1f2937;
    --ui-muted: #6b7280;
    --ui-dark: #111827;
    --ui-dark-hover: #030712;
    --ui-blue: #2563eb;
    --ui-blue-soft: #eff6ff;
    --ui-green: #198754;
    --ui-green-soft: #ecfdf3;
    --ui-amber: #b7791f;
    --ui-amber-soft: #fff8e6;
    --ui-red: #dc3545;
    --ui-red-soft: #fff1f2;
    --ui-purple: #6f42c1;
    --ui-shadow: 0 8px 28px rgba(17, 24, 39, .075);
    --ui-shadow-hover: 0 14px 36px rgba(17, 24, 39, .12);
    color: var(--ui-text);
}

.portal-page,
.portal-page * {
    box-sizing: border-box;
}

.portal-page a {
    text-underline-offset: 2px;
}

.portal-page h1,
.portal-page h2,
.portal-page h3,
.portal-page h4,
.portal-page h5,
.portal-page h6 {
    color: var(--ui-dark);
}

.portal-page > h2,
.portal-page > h3,
.portal-page .page-title {
    letter-spacing: -.02em;
}

.portal-page .text-muted,
.portal-page small.text-muted {
    color: var(--ui-muted) !important;
}

/* ---------------------------
   Surface / cards
---------------------------- */
.portal-page .card {
    border: 1px solid var(--ui-border) !important;
    border-radius: 16px !important;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow) !important;
    overflow: hidden;
}

.portal-page .card:hover.card-hoverable,
.portal-page .plan-card:hover,
.portal-page .payment-card:hover {
    box-shadow: var(--ui-shadow-hover) !important;
}

.portal-page .card-header {
    min-height: 54px;
    padding: 14px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    color: var(--ui-dark);
}

.portal-page .card-body {
    padding: 20px;
}

.portal-page .card-footer {
    padding: 12px 18px;
    background: #fff !important;
    border-top: 1px solid var(--ui-border) !important;
}

.portal-page hr {
    border-color: var(--ui-border);
    opacity: 1;
}

/* ---------------------------
   Form controls
---------------------------- */
.portal-page .form-label,
.portal-page label:not(.form-check-label) {
    color: #374151;
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: 7px;
}

.portal-page .form-control,
.portal-page .form-select,
.portal-page select.form-control {
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid var(--ui-border-strong);
    background-color: #fff;
    color: var(--ui-text);
    padding: 9px 12px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.portal-page textarea.form-control {
    min-height: auto;
}

.portal-page .form-control:focus,
.portal-page .form-select:focus,
.portal-page select.form-control:focus {
    border-color: #9ca3af;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, .07);
    outline: 0;
}

.portal-page .form-control::placeholder {
    color: #9ca3af;
}

.portal-page .input-group-text {
    border-color: var(--ui-border-strong);
    background: #f8fafc;
    color: #6b7280;
}

.portal-page .form-check-input {
    border-color: #aeb5bf;
}

.portal-page .form-check-input:checked {
    background-color: var(--ui-dark);
    border-color: var(--ui-dark);
}

/* ---------------------------
   Buttons
---------------------------- */
.portal-page .btn {
    border-radius: 10px;
    font-weight: 600;
    min-height: 38px;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.portal-page .btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.portal-page .btn-dark,
.portal-page .identity-btn-dark {
    background: var(--ui-dark) !important;
    border-color: var(--ui-dark) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(17, 24, 39, .14);
}

.portal-page .btn-dark:hover,
.portal-page .identity-btn-dark:hover {
    background: var(--ui-dark-hover) !important;
    border-color: var(--ui-dark-hover) !important;
}

.portal-page .btn-outline-dark {
    color: var(--ui-dark);
    border-color: #b8bec7;
    background: #fff;
}

.portal-page .btn-outline-dark:hover {
    color: #fff;
    background: var(--ui-dark);
    border-color: var(--ui-dark);
}

.portal-page .btn-primary,
.portal-page .btn-info {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

.portal-page .btn-success {
    background: #198754;
    border-color: #198754;
}

.portal-page .btn-warning {
    background: #f5b942;
    border-color: #f5b942;
    color: #1f2937;
}

.portal-page .btn-secondary {
    background: #6b7280;
    border-color: #6b7280;
}

.portal-page .btn-sm {
    min-height: 32px;
    border-radius: 8px;
}

/* ---------------------------
   Table actions
   Scope intentionally limited to action columns.
---------------------------- */
.portal-page .table-action-cell {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.portal-page .table-action-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
    vertical-align: middle;
}

.portal-page .table-action-group > form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.portal-page .table-action-group > .btn,
.portal-page .table-action-group > form > .btn {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.portal-page .table-action-group > .btn i,
.portal-page .table-action-group > form > .btn i {
    margin: 0 !important;
    font-size: .95rem;
    line-height: 1;
}

.portal-page .table-action-group--text {
    flex-wrap: wrap;
}

.portal-page .table-action-group--text > .btn,
.portal-page .table-action-group--text > form > .btn {
    width: auto;
    min-width: 78px;
    padding: 0 12px !important;
}

/* ---------------------------
   Alerts / badges / progress
---------------------------- */
.portal-page .alert {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 13px 16px;
    box-shadow: none;
}

.portal-page .alert-info {
    color: #1e4d74;
    background: #eef7ff;
    border-color: #d8ebfa;
}

.portal-page .alert-success {
    color: #17663a;
    background: var(--ui-green-soft);
    border-color: #ccebd8;
}

.portal-page .alert-warning {
    color: #73510d;
    background: var(--ui-amber-soft);
    border-color: #f3dfad;
}

.portal-page .alert-danger {
    color: #8f2732;
    background: var(--ui-red-soft);
    border-color: #f4cdd2;
}

.portal-page .badge {
    border-radius: 999px;
    padding: .42em .7em;
    font-weight: 700;
    letter-spacing: .01em;
}

.portal-page .progress {
    height: 22px;
    background: #edf0f3;
    border-radius: 999px;
    overflow: hidden;
}

.portal-page .progress-bar {
    font-weight: 700;
    border-radius: 999px;
    transition: width .3s ease;
}

/* ---------------------------
   Tables
---------------------------- */
.portal-page .table-responsive {
    border-radius: 12px;
}

.portal-page table.table {
    margin-top: 0 !important;
    margin-bottom: 0;
    border-color: var(--ui-border) !important;
    background: #fff;
}

.portal-page .table > :not(caption) > * > * {
    padding: 10px 12px;
    border-color: var(--ui-border) !important;
    background-clip: padding-box;
}

.portal-page .table thead th,
.portal-page thead.table-light th {
    background: #f7f9fb !important;
    color: #374151;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
    white-space: nowrap;
}

.portal-page .table tbody td {
    color: #374151;
    font-size: .86rem;
    vertical-align: middle;
}

.portal-page .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #fbfcfd;
}

.portal-page .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: #f3f6f9;
}

.portal-page .table-dark th,
.portal-page .table-dark td {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #fff !important;
}

/* ============================================================
   ADMIN TOOLS
   ============================================================ */
.admin-tool-page.identity-container {
    width: 100% !important;
    max-width: 1480px !important;
    margin: 20px auto 36px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.admin-tool-page > h3:first-child {
    margin: 0 0 18px !important;
    padding: 0 2px;
    font-size: 1.75rem !important;
    letter-spacing: -.025em;
}

.admin-tool-page > .card:first-of-type {
    border-top: 3px solid #111827 !important;
}

.admin-tool-page .card-header .fw-bold,
.admin-tool-page .card-body > h5:first-child {
    color: #111827;
    font-weight: 700;
}

.admin-tool-page #letterButtons .btn,
.admin-tool-page .d-flex.flex-wrap.gap-2 .btn.btn-sm {
    min-width: 34px;
    padding-left: 9px;
    padding-right: 9px;
}

.admin-tool-page .scroll-top-wrapper {
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 8px;
}

.admin-tool-page #tableWrapper {
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: #fff;
}

.admin-tool-page #logContainer {
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: var(--ui-shadow);
}

.admin-tool-page pre {
    background: #f7f9fb;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    padding: 10px 12px;
    color: #374151;
}

.admin-tool-page .ui-admin-kpi,
.admin-tool-page .row.g-3 .card {
    height: 100%;
}

/* ============================================================
   RESTRICTIONS
   ============================================================ */
.restrictions-page {
    width: 100%;
    max-width: 1320px !important;
    margin: 10px auto 36px;
    padding: 0 !important;
}

.restrictions-page > .text-center:first-child {
    max-width: 860px;
    margin: 4px auto 26px !important;
}

.restrictions-page > .text-center:first-child h3 {
    font-size: 1.85rem;
    letter-spacing: -.025em;
    text-transform: none !important;
}

.restrictions-page > .text-center:first-child p {
    color: var(--ui-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.restrictions-page #annexSelect {
    font-weight: 600;
    min-height: 48px;
}

.restrictions-page #annexDescription {
    display: block;
    margin-top: 9px !important;
    color: #6b7280 !important;
    line-height: 1.5;
}

.restrictions-page .card-header #filterInput {
    width: min(300px, 100%);
}

.restrictions-page #tableWrapper {
    max-height: 650px;
    overflow: auto;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
}

.restrictions-page #resultTable thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

.restrictions-page #tableStats {
    display: inline-flex;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 9px;
    background: #f7f9fb;
    color: #5b6470;
}

/* modal restrictions */
#restrictionModal .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(17,24,39,.22);
    overflow: hidden;
}

#restrictionModal .modal-header {
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
    padding: 16px 20px;
}

#restrictionModal .modal-title {
    font-weight: 700;
    color: #111827;
}

#restrictionModal .modal-body {
    padding: 20px;
}

#restrictionModal table {
    margin-top: 0 !important;
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing-page {
    width: 100%;
    max-width: 1280px;
    margin: 10px auto 42px;
}

.pricing-page > .lead,
.pricing-page > div:first-of-type {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.pricing-page > div:first-of-type h3 {
    font-size: 1.95rem;
    letter-spacing: -.03em;
    text-transform: none !important;
}

.pricing-page > div:first-of-type p,
.pricing-page > .lead {
    color: var(--ui-muted);
    line-height: 1.65;
}

.pricing-page > .container {
    max-width: 1240px !important;
    margin-top: 26px !important;
}

.pricing-page .plan-card {
    position: relative;
    border: 1px solid var(--ui-border) !important;
    border-top: 4px solid #d1d5db !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: var(--ui-shadow) !important;
    transform: none;
    cursor: default;
}

.pricing-page .bg-celeste.plan-card {
    border-top-color: #2563eb !important;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 30%) !important;
}

.pricing-page .plan-card-personal {
    border: 1px solid #d9d4ff !important;
    border-top: 4px solid #7c6ee6 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #faf9ff 0%, #ffffff 35%) !important;
    box-shadow: var(--ui-shadow) !important;
}

.pricing-page .plan-card:hover,
.pricing-page .plan-card-personal:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ui-shadow-hover) !important;
}

.pricing-page .plan-card .card-body,
.pricing-page .plan-card-personal .card-body {
    padding: 26px 24px !important;
}

.pricing-page .card-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.pricing-page .plan-price {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    align-self: center;
    width: fit-content;
    min-width: 132px;
    margin: 18px auto 14px !important;
    padding: 10px 18px;
    border: 1px solid #dbe5f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #0f172a;
    font-family: 'Inter', sans-serif;
    font-size: 2.05rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.025em;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .07);
}

.pricing-page .plan-price-currency {
    margin: 0 .18em;
    font-size: .62em;
    font-weight: 600;
    letter-spacing: 0;
    opacity: .82;
}

.pricing-page .plan-price-literal {
    white-space: pre;
}

.pricing-page .plan-card-starter .plan-price {
    color: #0f766e;
    background: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 100%);
    border-color: #99f6e4;
}

.pricing-page .plan-card-professional .plan-price {
    color: #1d4ed8;
    background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
    border-color: #bfdbfe;
    box-shadow: 0 10px 26px rgba(37, 99, 235, .12);
}

.pricing-page .plan-card-enterprise .plan-price {
    color: #6d28d9;
    background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%);
    border-color: #ddd6fe;
}

.pricing-page .plan-card-test-day .plan-price {
    color: #a16207;
    background: #fffbeb;
    border-color: #fde68a;
}

.pricing-page .plan-card-test .plan-price {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
}

.pricing-page .pricing-list {
    font-size: .9rem !important;
    line-height: 1.5;
}

.pricing-page .pricing-list li {
    margin-bottom: 10px !important;
    padding-left: 25px !important;
}

.pricing-page .pricing-list li::before {
    color: #198754 !important;
    content: "✓" !important;
}

.pricing-page .plan-card .btn-lg,
.pricing-page .plan-card-personal .btn-lg {
    min-width: 150px;
    border-radius: 11px;
    font-size: .95rem;
}

.pricing-page .payment-row {
    max-width: 1240px !important;
}

.pricing-page .payment-card {
    width: 100%;
    padding: 0 !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--ui-shadow) !important;
    background: #fff !important;
}

.pricing-page .payment-card .card-body {
    align-items: flex-start !important;
    padding: 22px !important;
}

.pricing-page .payment-icon-bar {
    justify-content: flex-start !important;
    color: #4b5563;
}

/* ============================================================
   ORDERS / SUBSCRIPTIONS
   ============================================================ */
.orders-page {
    width: 100%;
    max-width: 1280px;
    margin: 10px auto 36px;
}

.orders-page > .card:first-of-type {
    background: linear-gradient(135deg, #111827 0%, #263244 100%) !important;
    border: 0 !important;
}

.orders-page > .card:first-of-type h5,
.orders-page > .card:first-of-type p,
.orders-page > .card:first-of-type strong {
    color: #fff !important;
}

.orders-page > .card:first-of-type p {
    opacity: .78;
    margin-bottom: 0;
}

.orders-page .card h5 {
    font-weight: 700;
}

.orders-page .table-responsive {
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    overflow: auto;
}

.orders-page .table-success > * {
    --bs-table-accent-bg: #ecfdf3 !important;
}

.orders-page .accordion-item {
    border-color: var(--ui-border);
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 10px;
}

.orders-page .accordion-button {
    font-weight: 600;
    color: #1f2937;
    background: #fff;
}

.orders-page .accordion-button:not(.collapsed) {
    background: #f7f9fb;
    color: #111827;
    box-shadow: inset 0 -1px 0 var(--ui-border);
}

/* ============================================================
   PAYMENTS
   ============================================================ */
.payments-page {
    width: 100%;
    max-width: 1100px !important;
    margin: 8px auto 38px !important;
    padding-top: 18px !important;
}

.payments-page > .lead {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    color: var(--ui-muted);
    line-height: 1.7;
}

.payments-page .payment-card {
    border: 1px solid var(--ui-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--ui-shadow) !important;
}

.payments-page .payment-card .card-body {
    padding: 24px !important;
}

.payments-page .payment-icon-bar {
    color: #4b5563;
}

.payments-page .payment-icon-bar i {
    padding: 9px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafbfc;
}

/* ============================================================
   SUPPORT TICKETS
   ============================================================ */
.support-page {
    width: 100%;
    max-width: 1120px;
    margin: 8px auto 38px;
}

.support-page > h2 {
    margin-bottom: 18px !important;
    font-size: 1.8rem;
    letter-spacing: -.025em;
}

.support-page > .btn-success,
.support-page > a.btn-success {
    margin-bottom: 18px !important;
}

.support-page > table,
.support-page > .table-responsive {
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--ui-shadow);
    background: #fff;
}

.support-page > table.table {
    margin-top: 0 !important;
}

.support-page form:not(.d-inline) {
    padding: 22px;
    border: 1px solid var(--ui-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--ui-shadow);
}

.support-page .card-header {
    font-weight: 700;
}

.support-page .ticket-reply,
.support-page .card.mb-2 {
    box-shadow: none !important;
    border-left: 4px solid #d1d5db !important;
}

.support-page .card.mb-2.bg-white {
    border-left-color: #2563eb !important;
}

/* ============================================================
   DASHBOARD / ACCOUNT
   ============================================================ */
.dashboard-page.identity-container {
    max-width: 1180px !important;
    width: 100% !important;
    margin: 20px auto 36px !important;
}

.dashboard-page .nav-pills {
    padding: 6px;
    border: 1px solid var(--ui-border);
    border-radius: 14px;
    background: #f8fafc;
}

.dashboard-page .nav-pills .nav-link {
    border: 0 !important;
    background: transparent !important;
}

.dashboard-page .nav-pills .nav-link.active {
    background: #111827 !important;
    color: #fff !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991.98px) {
    .portal-page {
        width: 100%;
    }

    .admin-tool-page.identity-container,
    .restrictions-page,
    .pricing-page,
    .orders-page,
    .payments-page,
    .support-page,
    .dashboard-page.identity-container {
        width: 100% !important;
        margin-top: 8px !important;
    }

    .portal-page .card-header {
        align-items: stretch !important;
    }

    .portal-page .card-header .form-control {
        max-width: none !important;
    }
}

@media (max-width: 767.98px) {
    .portal-page .card {
        border-radius: 13px !important;
    }

    .portal-page .card-body {
        padding: 16px;
    }

    .portal-page .card-header {
        padding: 12px 14px;
    }

    .portal-page .table > :not(caption) > * > * {
        padding: 9px 10px;
    }

    .pricing-page .plan-card .card-body,
    .pricing-page .plan-card-personal .card-body {
        padding: 21px 18px !important;
    }
}